Keeping HTML list items inline and overlaying text - html

Question

I need some help understanding how to solve this problem. I've got multiple list elements that each have text with an unknown length. On each side of this text, there will be a small image/icon. Here is an example of the HTML:
.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>
JS Fiddle.
I want the text to have an ellipsis at the end if it is longer than the available width. I know how to use text-overflow: ellipsis and I can get the text to have an ellipsis but only after the right image drops below the text.
Some things that I have tried:
I have tried surrounding the whole li element in a div and using
display: inline-block
Similarly, I've tried surrounding just the image tags and text in a
single div with inline-block which has been closest to the desired result.
I tried putting the text in a span element and various CSS styling.
Each time the right image still jumps below the text.
Desired result:
And actual result:
Let me know if I should include any other information. Thanks in advance for any advice.

Answer 1

One trick could be to manually position the images on left and right and then place the text inside 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 much longer text that most probably will have 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 text (somewhat longer but not huge)
</div>
<img class="right" src="http://raksy.dyndns.org/disc.png">
</div>
</li>
</ul>

Answer 2

Probably not 100% what you want, but may get you the rest of the way:
Fiddle
.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 3

I tried with a div wrapper, including display: inline-block, and it worked well:
http://jsfiddle.net/nozimica/y3oy723v/
The key is:
Create a div wrapper.
Assign display: inline-block;
Give it a width.

Answer 4

Floats work, and so does absolute positioning:
.truncate>img {
width: 25px;
height: 25px;
position: absolute;
left: 8px;
}
.truncate img:first-child {
right: 8px;
left: auto;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 30px;
}
<li class="list-group-item" value="">
<div class="truncate">
<img src="...">
<img src="..."> A long text string that is about this length
</div>
</li>
Demo