<div style="display:inline-block;width:100px;">

very long text
</div>

任何使用纯css的方法都可以剪切太长的文本,而不是在下一行显示,并且最多显示100px

最佳答案

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

这是我能想到的一种可能的方法
.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

这样,由于设置了overflow,长文本仍会自动换行,但不会显示,并且通过将line-height设置为与height相同,我们确保仅显示一行。

请参见demo here和漂亮的overflow property描述以及交互式示例。

关于html - 在div中裁剪文本太长,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3695435/

10-11 08:11