文字溢出控制显示字数并用...代替

最新推荐文章于 2021-07-16 16:19:24 发布

原创最新推荐文章于 2021-07-16 16:19:24 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css+ div 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS样式来处理表格及内联元素的文字溢出问题，通过设置宽度限制并利用ellipsis实现文本的优雅截断，保持网页布局的整洁。

对于表格文字溢出的定义：

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

一般的文字截断（适用于内联与块）：
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">超级神奇的省略号</div>