2

I have a list of items and to the end of some items I want to add an icon (or several of them - it's dynamic). Items' container has a fixed width and if item's text size is too big - I'd like to add ellipsis.
So the problem is that icon is added next to text and if text is long - the icon moves off the container. The template for all items has to be the same.
Note: not all items have icons and some icons may have more than one icon.
Note2: javascript solution is not applicable, want to make it in pure CSS.

Actual:
enter image description here

Expected:
enter image description here

Any help is much appreciated.

body {
  font-size: 20px;
}

.container {
  width: 150px;
  background: #ff0;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.container li {
  border-bottom: 1px solid #000;
}

.item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon {
  background: #0f0;
}
<ul class="container">
  <li>
    <div class="item">
      <span class="text">Text 1</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 2 Text 2</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 3 Text 3 Text 3</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 4 Text 4 Text 4</span>
      <span class="icon"></span>
    </div>
  </li>
</ul>
Kiril
  • 2,935
  • 1
  • 33
  • 41

2 Answers2

5

If anyone still looking for solution I figured it out:

Markup:

<div class="block-wrap">
  <div class="block">
    <div class="icon"></div>
    <div class="text">Text text text text text text text text text text text text text text text text text text text</div>
  </div>
</div>

Styles:

.block-wrap {
  display: inline-block;
  max-width: 100%;
}

.block {
  width: 100%;
}

.text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon {
  float: right;
  margin-left: 10px;
  width: 20px;
  height: 14px;
  background-color: #333;
}

https://jsfiddle.net/rezed/n1qft37L/

reZed
  • 118
  • 2
  • 6
0

Try like this: Demo

Fix the width for the text next to .item class and make display as inline-block to get floated with icon. CSS:

.item {
    width:100%;
    overflow: hidden;
}
.item >span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:70%;
    display:inline-block;
}
.icon {
    background: #f00;
    display:inline-block;
    max-width:50px;
}

Hope this helps :)

G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • The problem is that the amount of icons is dynamic. So I can't set `max-width:50px;` to it. The same for text and `max-width:70%;`. There could be no icons at all and in that case text should be expanded to the whole item space. – Kiril Mar 02 '15 at 13:31