如何截断中间跨度中的文本[关闭]

Question

关闭。此问题需要debugging details。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

[<6天前关闭。

我正在使用UX功能，在其中我需要截断FooBar并追加...，如果Change链接到达页面的末尾。我也不允许Change链接转到下一行。简而言之，如何截断中间文本，如下图所示？

谢谢。

Answer 1

您尝试编写的功能实际上已内置到CSS中。如果使用属性text-overflow: ellipsis;，则文本将具有...而不是开始新行。

Answer 2

在HTML文件中

<div class="container">
    <div>Name:</div>
    <div class="mid-child">FooBar FooBar FooBar FooBar FooBar</div>
    <div>Change</div>
</div>

在CSS文件中
div.container {
    display: flex;
    width: 200px;
}
div.mid-child {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}