当文字太多,而我们不需要展示那么的时候就会出现省略号是常见的需求,那么出现省略号怎么实现呢?
第一种,单行文本出现省略号;就是使用text-overflow:ellipsis属性和属性值,
还要一定要配合white-space:nowrap;表示不换行,overflow:hidden;溢出隐藏,当然也得你哈的文字超过你的宽度才行
div {
height: 30px;
width: 100px;
border: 1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
第二种,多行文本溢出出现省略号,这个问题的话估计困扰了很多人,那么我们来看看怎么实现
div {
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
div::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
}
这=个实现原理是在标签后面添加一个伪元素,伪元素的内容就是省略号,
如果IE8以下不支持就把::after 改为:after就OK啦
还有一种情况,不想用伪元素出现省略号怎么实现多行文本出现省略号呢?
width:value;
overflow : hidden;
text-overflow: ellipsis;
/* display:box主要是控制父容器里面子元素的排列方式 */
display: -webkit-box;
/* 实现限制文字显示多行,多余的用... */
-webkit-line-clamp: 2; //当文字达到两行以后就会出现省略号
/* 属性规定框的子元素应该被水平或垂直排列。 */
-webkit-box-orient: vertical;