Question

我有一个项目列表，每个项目分为3个部分。

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

我希望第一部分（＆＃34;长部分＆＃34;）截断而不是换行。

我可以让第一部分不包装，而其他部分包装 - 但我无法弄清楚如何让浏览器截断第一部分。

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

使用Change view按钮将输出窗格移到侧面。然后，您可以使用滑块查看包装行为。我尝试使用flexbox（＆＃34; flex try＆＃34;）和样式溢出属性（＆＃34; overflow try＆＃34;）但两者都只是将文本扩展到视图之外。

第三项是我的解决方法（只是让它换行） - 它不是我想做的，但它确实有效。

那么有什么方法可以让第一部分截断（有或没有省略号）？

我只需要在现代浏览器中使用它：Edge（实际上不是出价），Chrome，Firefox和Safari（移动和桌面）。我不需要担心IE或Android浏览器。

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

Answer 1

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

中

overflow: hidden;
text-overflow: ellipsis;

Answer 2

正在使用跨度。您需要在CSS和display中设置width属性。

   span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 40%; /* it be upto requirment */
    }

截断列表项中的单个文本块

2 个答案: