带有省略号的动态文本旁边的滑动图标答案

【问题标题】：Sliding icon next to dynamic text with ellipsis带有省略号的动态文本旁边的滑动图标
【发布时间】：2015-03-02 11:58:48
【问题描述】：

我有一个项目列表，我想在一些项目的末尾添加一个图标（或其中几个 - 它是动态的）。项目的容器具有固定宽度，如果项目的文本大小太大 - 我想添加省略号。
所以问题是图标被添加到文本旁边，如果文本很长 - 图标会移出容器。所有项目的模板必须相同。
注意：并非所有项目都有图标，有些图标可能有多个图标。
注意2： javascript解决方案不适用，想用纯CSS制作。

实际：

预期：

非常感谢任何帮助。

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>

【问题讨论】：

标签： html css icons css-float ellipsis

【解决方案1】：

如果有人还在寻找解决方案，我想通了：

标记：

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

样式：

.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】：

试试这样：Demo

修正.item class 旁边文字的宽度，使display as inline-block 与图标一起浮动。 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;
}

希望这会有所帮助:)

【讨论】：

问题是图标的数量是动态的。所以我不能给它设置max-width:50px;。文本和max-width:70%; 相同。可能根本没有图标，在这种情况下，文本应该扩展到整个项目空间。