如何定位跨度标记内的第二行文本答案

【问题标题】：How to target the second line of text within a span tag如何定位跨度标记内的第二行文本
【发布时间】：2015-05-07 13:47:02
【问题描述】：

我有一个 wordpress 主题，其列表格式如下，

<ul class="ozy-custom-list wpb_content_element ">
 <li>
  <span class="oic oic-dot" style="color:#2f75aa"></span>
  <span>Personalised Services</span>
 </li>
 <li>
  <span class="oic oic-dot" style="color:#2f75aa">
  </span><span>Complete support – from Port to Destination</span>
 </li>
</ul>

第一个跨度是项目符号，第二个包含项目符号后面的文本。

现在，对于第二个 li 元素，文本转到下一行并位于项目符号下方。我想在第二行添加一些填充，这样它就不会出现在项目符号下方。

这是一张显示发生了什么的图片，

如何定位第二行（即“目标”）？

【问题讨论】：

浏览器的默认样式表通常带有您想要的行为。你能发布你的ul 和li 样式吗？

标签： html css wordpress

【解决方案1】：

您可以通过将点跨度显示为内联块来解决此问题。然后你可以给它一个固定宽度并以负边距移动它：

.oic-dot {
    display: inline-block;
    width: 15px;
    margin-left: -20px;
}

我让你看起来像demo。

您可能需要稍微调整一下宽度和边距，以根据您的网站进行调整。

【讨论】：

【解决方案2】：

您想要“文本缩进”css 属性：

li span {
     padding-left: 1.5em;
     text-indent:-1.5em;
}

Text-indent 缩进第一行，因此我们将其向后推，但仅在我们将整个文本推到右侧之后。

【讨论】：

【解决方案3】：

如果你想选择第二行，你可以使用以下：

li+li span+span:first-line{
  color: black;
}
li+li span+span{ /*second line*/
  display: block;
  float: left;
  color: red;
}

JSFiddle：https://jsfiddle.net/ws5rk0sx/

如果您只需要将所有行均等对齐，请使用 just：

li+li span+span{
  display: block;
  float: left;
}

【讨论】：

这将针对第二个跨度，而不是跨度中的第二行文本

【解决方案4】：

是的，您可以使用以下内容：

li:last-child > span:last-child {
    ...
}

给你的 ul 一个 id 可能会有所帮助，以便你可以使用：

#ulid > li:last-child > span:last-child {
    ...
}

不会弄乱页面上的任何其他 UL。如果它不是 ul 中的最后一个 li，您可以使用 nth 类型而不是 li 标签的 last-child ^^

【讨论】：

【解决方案5】：

我创建了一个 JsFiddle here

我已将以下 css 应用于跨度：

.text-span{
    display:block;
    margin-left:5px;
}

如果您不想在元素上设置类，您也可以使用：

ul > li span:nth-of-type(2){
    display:block;
    margin-left:5px;
}

【讨论】：

【解决方案6】：

您可以简单地使用没有边框的表格；）第一个 colm 包含项目符号，第二个 colm 包含信息...

【讨论】：