如何缩小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作品只有当下面条件为真：

1. 元素的宽度约束。
2. 元素有overflow值不是visible和white-space:nowrap集合。

从MDN Mozzilla Developer Network

该属性仅影响在其内联进展方向溢出的块容器元素的内容（不溢出文本在盒的底部，例如）。防止包装（例如，由于'white-space：nowrap'）或单个词太长而无法包装时，文本可能会溢出。

此CSS属性不会强制发生溢出;要这样做并使文本溢出应用，作者必须在元素上应用一些附加属性，例如将溢出设置为隐藏。

您的代码不适合条件2，所以我加overflow:hidden和white-space:nowrap性能和一切开始正常工作......