How to target the second line of text within a span tag

2 Views

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.

Read More

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,

enter image description here

How can I target the second line (i.e “destination”) ?

Post Views: 2

Related posts

Leave a Reply

6 comments

  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.

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

  3. 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;
}

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

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