How to maintain HTML list items in a single line while overlaying text

Question

How to maintain HTML list items in a single line while overlaying text

I'm seeking assistance with understanding how to solve a particular issue. I have multiple list elements with varying lengths of text content, each flanked by small images/icons on either side. Below is an example of the HTML structure:

.truncate>img {
  width: 25px;
  height: 25px;
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      Content
    </div>

    <div class="col-sm-4">
      <ul id="myList" class="list-group">
        <li class="list-group-item" value="">
          <div class="truncate">
            <img src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Close_Box_Red.png">A long text string that is about this length
            <img src="http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.med.png">
          </div>
        </li>
        <li class="list-group-item" value="">
          <div class="truncate">
            <img src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Close_Box_Red.png">A long text string that is about this length
            <img src="http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.med.png">
          </div>
        </li>
        <li class="list-group-item" value="">
          <div class="truncate">
            <img src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Close_Box_Red.png">A long text string that is about this length
            <img src="http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.med.png">
          </div>
        </li>
      </ul>
    </div>

    <div class="col-sm-4">
      Content
    </div>
  </div>
</div>

View Example on JS Fiddle.

My goal is to have the text truncated with an ellipsis at the end if it exceeds the available width. Despite using text-overflow: ellipsis, the text gets cut off before the right image. Here are some methods I've attempted:

Enclosing the entire li element in a div and utilizing display: inline-block
Placing the image tags and text within a single div with inline-block which yielded closer results.
Putting the text in a span element and applying different CSS styles.

However, the right image continues to drop below the text each time.

Desired Outcome:

https://i.sstatic.net/p6PFM.png

Actual Outcome:

https://i.sstatic.net/Z07KD.png

Feel free to let me know if additional information is required. Thank you in advance for any suggestions or advice.

html css

Answer 1

Answer №1

One technique you can use is to manually adjust the placement of the images on the left and right side, then enclose the text within an absolutely-positioned div:

.left { position: absolute;
        left: 0px;
}

.right { position: absolute;
         right: 0px;
}

.text { position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        left: 24px;
        right: 24px;
}

.container { display: inline-block;
             width: 100%;
             position: relative;
             height: 24px;
}

    <ul>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a text
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a longer text that may need to be truncated
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a somewhat lengthy text
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
    </ul>

Answer 2

One technique you can use is to manually adjust the placement of the images on the left and right side, then enclose the text within an absolutely-positioned div:

.left { position: absolute;
        left: 0px;
}

.right { position: absolute;
         right: 0px;
}

.text { position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        left: 24px;
        right: 24px;
}

.container { display: inline-block;
             width: 100%;
             position: relative;
             height: 24px;
}

    <ul>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a text
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a longer text that may need to be truncated
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
      <li>
        <div class="container">
          <img class="left" src="http://raksy.dyndns.org/cross.png">
          <div class="text">
            This is a somewhat lengthy text
          </div>
          <img class="right" src="http://raksy.dyndns.org/disc.png">
        </div>
      </li>
    </ul>

Answer 3

Answer №2

It might not be exactly what you're looking for, but this solution could help you reach your desired outcome: Check out the code snippet here

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
  display: inline-block;
  width: 50%;
}

.list-group-item{
    background-color:transparent;
    border:none;
    padding:0px 15px;
    cursor: pointer;
  white-space: nowrap;
}

Answer 4

It might not be exactly what you're looking for, but this solution could help you reach your desired outcome: Check out the code snippet here

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
  display: inline-block;
  width: 50%;
}

.list-group-item{
    background-color:transparent;
    border:none;
    padding:0px 15px;
    cursor: pointer;
  white-space: nowrap;
}

Answer 5

Answer №3

After experimenting, I found success with a div container that has the style display: inline-block:

http://jsfiddle.net/yourusername/example123/

To make it work perfectly:

Start by creating a div container.

Set the style to display: inline-block;
Specify a width for the container.

Answer 6

After experimenting, I found success with a div container that has the style display: inline-block:

http://jsfiddle.net/yourusername/example123/

To make it work perfectly:

Start by creating a div container.

Set the style to display: inline-block;
Specify a width for the container.

Answer 7

Answer №4

Using floats and absolute positioning can produce the desired effect:

.truncate>img {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
}

.truncate img:first-child {
  right: 10px;
  left: auto;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 40px;
}

<li class="list-item-item" value="">
  <div class="truncate">
    <img src="...">
    <img src="..."> This is a longer text string that demonstrates how this works
  </div>
</li>

See it in action here

Answer 8

Using floats and absolute positioning can produce the desired effect:

.truncate>img {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
}

.truncate img:first-child {
  right: 10px;
  left: auto;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 40px;
}

<li class="list-item-item" value="">
  <div class="truncate">
    <img src="...">
    <img src="..."> This is a longer text string that demonstrates how this works
  </div>
</li>

See it in action here

How to maintain HTML list items in a single line while overlaying text

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can one ensure that the column width in a Datatable adjusts dynamically based on the content within?

Error found - PHP if condition inside HTML td element

Troubleshooting the problem of keyframes chaining animation in React animations

Incorrect formatting of HTML emails in Outlook

Issue with iOS 10: Changes to class not reflected in CSS/styles

Tips on cycling through hovered elements in a specific class periodically

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

Tips on stopping slideToggle from opening and closing when clicked for the first time

The z-index property does not seem to apply to pseudo elements

Styling text using SVG in HTML

The CSS form appears to be too large for the page

rearrange the div elements by shifting each one into the one preceding it

Discovering checkboxes in HTML using jQuery

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

How can I use jQuery to reposition an inner element to the front?

User's information will only be updated once the page is refreshed

Open the overflow div within a table data cell

Position an element in the middle of the range between the tallest and shortest characters

What is the best way to showcase a variable from a switch statement on my ASP.NET web page?