Question

尝试让text-overflow: ellipsis处理具有inline-block的元素和位于其右侧的浮动元素。我继续创建fiddle以准确显示它是如何设置的。但基本上有一个按钮float: right应该停止 span text-overflow，但它只是将其推到下一行。< / p>

我知道如果我设置max-width，它会起作用，但对我来说这只是快速解决方案，不是正确解决问题的正确解决方案。在小提琴上，将max-width: 150px设置为.icon-list-inline .icon-text以查看我正在谈论的内容。

如果您有任何好的解决方案，除了说设置max-width，这似乎是大多数人推荐的类似S.O.问题，请告诉我。谢谢你看看它。

Answer 1

我只会删除文本周围的额外<span>标记，并将整个内容粘贴到另一个div中。

<div class="block">
  <span class="icon-img">
    <img src="https://cdn1.iconfinder.com/data/icons/glyph_set/128/location_pin.png" />
  </span> 
  In vehicula mi at dolor volutpat vestibulum.
</div>

并将CSS从定义.icon-list-inline .icon-text更改为：

.icon-list-inline .block {
  margin-top: 1px;
  vertical-align: middle;
  text-align: left;
  direction: ltr;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://jsfiddle.net/Qt4s8/

对带有内联块的元素使用文本溢出

1 个答案: