Sliding icon next to dynamic text with ellipsis

问题

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:

Expected:

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>

回答1:

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/

回答2:

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 :)

来源：https://stackoverflow.com/questions/28809264/sliding-icon-next-to-dynamic-text-with-ellipsis

标签

html

css

icons

css-float

ellipsis