CSS 控制需隐藏的文字样式代码

作者：袖梨 2022-06-25

在一个限定了高宽的容器中放入文字，当文字超出时就会出现杯具，简单的控制使用 CSS 即可；
观察了一下，使用四大金刚即可使此文字超出时自动截去末尾，并加上省略号：

代码如下 复制代码

.words{
width:200px; //限定宽度
white-space:nowrap; //强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
word-break:keep-all; //对于中文，韩文，日文，不允许字断开
text-overflow:ellipsis; //当对象内文本溢出时显示省略标记(...)
overflow:hidden; //超出容器不显示
}

例

代码如下 复制代码

测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度



white-space-nowrap
word-break-keep-all
overflow-hidden
text-overflow-ellipsis

启用的 Classes:

css

代码如下 复制代码

.box{line-height:22px; height:22px; width:200px; overflow:auto; border:1px solid #ccc; margin:10px;}
.white-space-nowrap{white-space:nowrap;}
.word-break-keep-all{word-break:keep-all;}
.overflow-hidden{overflow:hidden;}
.text-overflow-ellipsis{text-overflow:ellipsis;}

相关文章

精彩推荐