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

debugcn 发表于 Dev

用户725

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

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

我尝试过的一些事情：

我尝试将整个li元素包围在div中，并使用display：inline-block
同样，我尝试在一个div中仅用最接近所需结果的inline-block包围图像标签和文本。
我尝试将文本放入span元素和各种CSS样式中。

每次右图仍跳到文本下方。

所需结果：

和实际结果：

让我知道我是否应该包括任何其他信息。在此先感谢您的任何建议。

6502

一种技巧是手动将图像左右放置，然后将文本放置在绝对放置的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。