如何在div中缩写任何非html文本？

Question

我想创建固定大小div，通过缩写溢出div的任何内容来限制显示的文本。

<div style="text-overflow:ellipsis; width:100px;height:100px">
<b>my headline</b>
<p></p>
this is some more text
this is some more text
<td> some table elements</td>
this is some more text
this is some more text
this is some more text
this is some more textthis is some more textthis is some more text
</div>

但是这种使用text-overflow:ellipsis的css方法在这里不起作用。 我明确地希望限制外部div中的任何内容。不仅包括纯文本，还包括<b>, <p>, <i>, <tr>, <td>等html标记标记。

这可以纠正吗？或者有更好的解决方案吗？

Answer 1

见下面的工作示例：

<div style="text-overflow:ellipsis; width:100px;height:100px;overflow:hidden;white-space:nowrap;">
<b>my headline</b>
<p></p>
this is some more text
this is some more text
<td> some table elements</td>
this is some more text
this is some more text
this is some more text
this is some more textthis is some more textthis is some more text
</div>

text-overflow仅在以下条件为 true 时才有效：

1. 元素的宽度约束。
2. 该元素的值为overflow 不 visible且white-space:nowrap已设置。

来自MDN Mozzilla Developer Network

  

此属性仅影响在其内联行进方向上溢出块容器元素的内容（例如，不会在框底部溢出文本）。当文本被阻止包裹时（例如，由于'white-space：nowrap'）或单个单词太长而无法适应，文本可能会溢出。

此CSS属性不会强制发生溢出;要执行此操作并使文本溢出应用，作者必须在元素上应用一些其他属性，例如将overflow设置为hidden。

您的代码不适用于条件2，因此我添加了overflow:hidden和white-space:nowrap属性，一切都开始运作良好......