如何在span标签内定位第二行文本

Question

I have a wordpress theme whose list is in the following format,

<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>

The first span is for the bullet and the second contains the text that goes after the bullet.

Now in the case of the second li element the text goes to the next line and below the bullet. I would like to add some padding to the second line so it doesn't do below the bullet.

Here's a picture to show whats happening,

How can I target the second line (ie "destination") ?

Answer 1

You can fix that by displaying the dot-span as an inline-block. Then you can give it a fix width and move it with a negative margin:

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

I made you this lookalike demo .

You will probably need to play a bit with the width and margin to adjust it to your website.

Answer 2

If you want to select 2nd line you can use following:

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/

If you only need to align all lines equally use just:

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

Answer 3

You want the "text-indent" css property:

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

Text-indent indents the first line, so we push it backwards, but only after we pushed the ENTIRE text to the right.

Answer 4

Yes, you can use the following:

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

It would probably help however to give your ul an id, so that you could use:

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

Without messing up any other UL's on the page. If it wasn't the last li in the ul you can use nth type instead of last-child for the li tag ^^

Answer 5

I've created a JsFiddle here

I've applied the below css to the span:

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

If you prefer not to set a class on the element you could also use:

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

Answer 6

您可以简单地使用无边框表格；）第一个colm包含子弹，第二个colm包含信息...