Question

我需要一些帮助来了解如何解决这个问题。我有多个列表元素，每个元素都有未知长度的文本。在本文的每一侧，都会有一个小图像/图标。以下是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

如果文本长于可用宽度，我希望文本末尾有省略号。我知道如何使用文本溢出：省略号，我可以让文本有一个省略号，但只有在正确的图像下降到文本下方之后。

我尝试过的一些事情：

我尝试在div中使用包围整个li元素 display：inline-block
同样，我试过只围绕图像标签和文本带有内联块的单个div，它最接近所需的结果。
我尝试将文本放在span元素和各种CSS样式中。

每次正确的图像仍然跳到文本下方。

期望的结果：

实际结果：

如果我应该包含任何其他信息，请告诉我。提前感谢任何建议。

Answer 1

一个技巧可能是左右手动定位图像，然后将文本放在一个绝对定位的div中：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我尝试使用div包装器，包括display: inline-block，并且效果很好：

http://jsfiddle.net/nozimica/y3oy723v/

关键是：

创建一个div包装器。
- 分配display: inline-block;
- 给它一个宽度。

Answer 3

可能不是100％你想要什么，但可能会让你完成其余的工作： 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 4

漂浮工作，绝对定位也是如此：

.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

保持HTML列表项内联并覆盖文本

4 个答案: