html - 截断列表项中的单个文本 block

Question

我有一个元素列表，其中每个元素分为 3 个部分。

<li>[long part(1)] [separator(2)] [important part(3)]</li>

我希望第一部分(“长部分”)被截断而不是换行。

我可以让第一部分不换行，而其他部分换行 - 但我不知道如何让浏览器截断第一部分。

这是一个代码笔示例:https://codepen.io/fiver/pen/rGRevq?editors=1010

使用 Change view 按钮将输出 Pane 移到一边。然后您可以使用 slider 查看环绕行为。我尝试使用 flexbox(“flex try”)和样式溢出属性(“overflow try”)，但两者都只是将文本扩展到 View 之外。

第三项是我的解决方法(让它环绕)——这不是我想做的，但它有效。

那么有什么方法可以截断第一部分(带或不带省略号)？

我只需要让它在现代浏览器中运行:Edge(实际上不是投标交易)、Chrome、Firefox 和 Safari(移动和桌面)。我不需要担心 IE 或 Android 浏览器。

---

答案示例:https://codepen.io/fiver/pen/yEYWmp

Answer 1

您的“溢出尝试”有效，但您需要将这 2 个放在 <li> 中

overflow: hidden;
text-overflow: ellipsis;