学问是经验的积累,才能是刻苦的忍耐
说明
使用纯css实现单行多行文本溢出的自动省略以及跟随鼠标显示所有内容
做法
单行
我们需要使用css
提供的一个样式:text-overflow
,它可以设定三种属性:
clip
:直接裁剪,不做任何处理ellipsis
:使用省略号(…)来表示被隐藏的文字String
:使用给定的字符串来表示被隐藏的文字
首先是设置一个div
用来包裹要省略的文字:1
2
3<div>
我太长了,这个该死的作者一定会把我截断的,大家快救救我。
</div>
然后是其css
样式:1
2
3
4
5
6
7
8
9
10div {
/*溢出隐藏*/
overflow: hidden;
/*css提供的文字溢出后自动隐藏并显示...*/
text-overflow: ellipsis;
width: 200px;
/*设置文本不换行*/
white-space: nowrap;
border: solid 1px red;
}
显示效果如下图:
为其添加鼠标经过显示效果:
首先在div
标签中增加tooltip
字段:1
2
3<div tooltip="我太长了,这个该死的作者一定会把我截断">
我太长了,这个该死的作者一定会把我截断
</div>
tooltip
字段主要作用是在显示提示的时候知道div中完整的文字。
然后在增加样式:1
2
3
4
5
6
7
8
9
10
11
12
13
14/* 设置提示的显示 */
[tooltip]::before {
position: absolute;
top: 20px;
left: 200px;
background: #888;
/* 设置提示中的内容 */
content: attr(tooltip);
opacity: 0.0;
}
/* 设置鼠标经过提示的透明度 */
[tooltip]:hover::before {
opacity: 1.0;
}
鼠标经过时如图:
多行
多行情况下只要对div的样式进行一些特别的更改(注意部分属性仅对webkit内核浏览器有效):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17div.multi-line {
/*溢出隐藏*/
overflow: hidden;
/*css提供的文字溢出后自动隐藏并显示...*/
text-overflow: ellipsis;
width: 200px;
/*设置webkit浏览器特别的盒模型*/
display: -webkit-box;
/*设置文本行数*/
-webkit-line-clamp: 2;
/* 设置文本排列方向 */
-webkit-box-orient: vertical;
/*设置文本换行属性*/
word-wrap: break-word;
word-break: normal;
border: solid 1px red;
}
html代码如下:1
2
3<div class="multi-line" tooltip="我更长长长长长长长长长长长长长长,我死的更惨惨惨惨惨惨惨惨惨惨">
我更长长长长长长长长长长长长长长,我死的更惨惨惨惨惨惨惨惨惨惨
</div>
显示效果如下图:
总结
对于多行的情况目前仅有webkit内核浏览器支持,争取做到所有浏览器支持。