在div中裁剪文本太长
在div中裁剪文本太长
提问于 2010-09-12 23:43:28
<div style="display:inline-block;width:100px;">
very long text
</div>任何方法都可以使用纯css来剪切过长的文本，而不是显示在下一行，并且只显示最大100px
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-09-12 23:44:20
<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描述。
Stack Overflow用户
发布于 2010-09-12 23:47:08
您可以使用：
overflow:hidden;若要隐藏区域外的文本，请执行以下操作。
请注意，它可能会剪切最后一个字母(因此最后一个字母的一部分仍将显示)。一种更好的方法是在末尾显示一个省略号。您可以使用text-overflow完成此操作
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;Stack Overflow用户
发布于 2011-12-10 01:56:35
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3695435
复制相关文章
相似问题
腾讯云开发者
