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:

Actual Outcome:

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

Removing the 'div' tag using jQuery in CodeIgniter

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

How to emphasize a clicked hyperlink in AngularJS

Place CSS elements in relation to the underlying element

How to set the element in the render method in Backbone?

Update the displayed number on the input field as a German-formatted value whenever there is a change in the input, all while maintaining

javascript highchart image carousel

Having trouble getting the on:dblclick event to trigger on a row within a list using S

Stop Scrolling on Web Pages with HTML5

CSS animation: Final position once the vertical text has finished scrolling

Having trouble accessing the information stored in the Firebase Database?

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Streamlining programming by utilizing localStorage

What is the method to trigger a function upon opening an anchor tag?

populating a HTML image tag 'src' attribute with data extracted from API javascript code

Verify whether the value is in the negative range and implement CSS styling in React JS

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

What steps can be taken to override the property overflow:hidden specifically for a custom tooltip design

Unlocking fashion with $refs: A step-by-step guide