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

【问题标题】：Truncating an individual block of text within a list item截断列表项中的单个文本块
【发布时间】：2018-06-03 10:24:32
【问题描述】：

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

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

我希望第一部分（“长部分”）截断而不是换行。

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

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

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

第三项是我的解决方法（让它换行）——这不是我想要做的，但它有效。

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

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

overflow: hidden;
text-overflow: ellipsis;

【讨论】：

Ohhhhh - 两者都需要？谢谢！

【解决方案2】：

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

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

【讨论】：