css 单行显示省略号,以及多行显示省略号的
`
显示的内容
`
1. 单行显示省略号
div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2.多行溢出显示省略号
div{
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
// text-overflow: ellipsis;
-webkit-line-clamp: 4;
}
当-webkit-box-orient不起作用时(默认编译的时候,会过滤 )
(关闭 autoprefixer 然后再开启:用注释就可以做到)
代码:
div{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
又或者
div{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
};
各个属性的使用:
-
overflow:hidden;
设置了这个属性,text-overflow属性才会生效。 -
text-overflow: ellipsis;
用来在多行文本的情况下,用省略号"..."隐藏超出范围的文本内容。 -
display: -webkit-box;
必须结合的属性,将对象作为弹性伸缩盒子模型显示。 -
-webkit-line-clamp: 2;
用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。 -
-webkit-box-orient: vertical;
必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。`
超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容
//超出范围,对文本进行省略号隐藏
div{
width: 100px;
overflow: hidden; /*对超出容器的部分强制截取,高度不确定则换行*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
white-space: nowrap; /*禁止换行*/
}
想显示省略掉的
/*方法一:鼠标移上去时直接释放宽度限制
*但释放宽度岂不是会影响其他元素布局
*/
div:hover{
width: auto;
}
/*方法二:鼠标移上去时释放overflowd的截取,按照原本样式显示,即换行
*但换行会改变布局,但稍微比上面不换行直接显示好一点
*/
div:hover{
text-overflow:inherit;
overflow: visible;
white-space: pre-line; /*合并空白符序列,但是保留换行符。*/
}
/*方法三:鼠标移上去时会显示title标签中的文字内容,但是点丑,显示速度有点慢,位置也不大好*/
<div title="超出文字省略显示">超出文字省略显示</div>
antd table中的显示(column):
{
title: '班级名称',
dataIndex: 'className',
width: 100,
render: (text) => {
if (text) {
return <span title={text}>{text.length > 5 ? text.substring(0, 5) + '...' : text}</span>;
}
}
}
.li1 {
list-style:none;
width:100px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
margin-top:5px;
}
.li2{
list-style:none;
margin-top:5px;
}
<ul>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">111122222222222222222222221222</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">45658798980000000000000899999999</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">dfgf66666666666666666666666666666</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">sdf88888888888888888888888888888888</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">hkjjk6888888888666666666666666666666</a></li>
</ul>
posted on 2019-03-04 14:49 Cherish_Now 阅读(5518) 评论(0) 编辑 收藏 举报