文字越界添加...显示
在HTML页面上,会遇到当文字长度超出一定长度的时候,将超出的部分显示为...的情况,这个功能很好实现,很多人都可以直接写出来。
示例代码:
.demo {
display: block;
text-overflow: ellipsis; //显示省略符号来代表被修剪的文本,也可以自定义
overflow: hidden; //溢出内容隐藏
white-space:nowrap; //强制文本在一行内显示
}
在文字后面,添加图标
有时候会遇到复杂的情况,需要在这段文字后紧跟一个图标,当文字溢出时,图标照常显示在后面。示例如下,图中的12是一直要显示的:
这种情况下,就需要对标签布局进行处理才行,因为 text-overflow 的起作用环境是一个 ‘block’ 状态下的父元素容器里。
示例代码:
Text 1 Text 2 Text 3 Text 4 Text 5
.inline-wrap {
display: inline-block;
max-width: 100%;
}
.block-wrap {
width: 100%;
}
.block {
position: relative;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 20px;
}
.icon {
position: absolute;
width: 20px;
right: 0;
}
(完)