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

尝试获取

文本溢出：省略号

以处理具有

内联块

和其右侧浮动元素的元素。我继续创建了一个，以显示它是如何设置的。但实际上有一个按钮有一个

float:right

，它应该停止

span

和

文本溢出

，但它只是将其向下推到下一行

我知道如果我设置一个

最大宽度

，它会起作用，但对我来说，这只是一个快速解决方案，而不是真正解决问题的正确解决方案。在小提琴上，将

max width:150px

设置为

.icon list inline.icon text

以查看我在说什么

---

如果您对此有什么好的解决方案，除了说set a

max width

，这似乎是大多数人对类似S.O.问题的建议，请让我知道。谢谢你看

我会删掉围绕文本的额外的

标记，然后将整个内容粘贴到另一个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>

---

供您参考

浮动：对；显示：按钮上的内联块

-浮动始终显示为块，因此您的

显示

属性没有任何影响。这很好。我只是复制了bootstrap

.btn

CSS，以免把它全部写出来。在我看来，我只是在按钮上添加了

.pull right

，这就是为什么我在

.btn

CSS中添加了

float:right

。谢谢你的提醒。我喜欢这个解决方案。我认为这个技巧是在设置

HTML

的过程中。你这个男人。我总是想避免设置

最大宽度

，因为这在响应性强的站点上不实用。这绝对是一个很好的解决方法。哈哈，谢谢。我认为重要的一点是，您的内容显示为

块

，而不是

内联块

^是的，我同意。我有一个

标签，在这个特定的

标签上面有一个

display:block

，它工作得非常好。

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