裁剪文本太长在div [英] crop text too long inside div

问题描述

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

very long text
</div>

以任何方式使用纯CSS剪切太长的文本，而不是显示在下一个新行只显示最多100px

any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px

推荐答案

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

这是一种可能的方法， / p>

This is one possible approach i can think of

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

这样，长文本仍会换行，但由于溢出设置，通过设置 line-height 与 height 相同，我们确保只有一行

This way the long text will still wrap but will not be visible due to overflow set, and by setting line-height same as height we are making sure only one line will ever be displayed.

请参阅这里的演示和nice 溢出属性说明与互动示例。

See demo here and nice overflow property description with interactive examples.

这篇关于裁剪文本太长在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！