本文摘自PHP中文网,作者零下一度,侵删。
之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号。我通过查阅一些资料整理了一下,拿出来与大家分享一下。 单行文本的溢出隐藏
对于单行文本溢出 隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结合 overflow: hidden和 white-space: nowrap;,我有时就忘记写了,导致效果出不来,还让我找了半天。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 1 <!DOCTYPE html>
2 < html >
3 < head >
4 < meta charset = "UTF-8" >
5 < title >单行文本溢出隐藏</ title >
6 < style >
7 p{
8 width: 200px;
9 height: 300px;
10 border: 1px solid cyan;
11 overflow: hidden;/*溢出隐藏*/
12 white-space: nowrap;/*文字不换行*/
13 text-overflow: ellipsis;/*溢出用省略号代替*/
14 }
15 </ style >
16 </ head >
17 < body >
18 < p >
19 < p >凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、
中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、
汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。</ p >
20
21 </ p >
22 </ body >
23 </ html >
|
效果:

多行文本的溢出隐藏
我是用伪类标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 1 <!DOCTYPE html>
2 < html >
3 < head >
4 < meta charset = "UTF-8" >
5 < title >多行文本溢出隐藏</ title >
6 < style >
7 p{
8 position: relative;
9 overflow: hidden;
10 width: 200px;
11 height: 300px;
12 line-height: 30px;
13 font-size: 20px;
14 border: 1px solid cyan;
15 }
16 p:after{
17 position: absolute;
18 bottom: 0;
19 right: 0;
20 padding:0 5px 1px 45px;
21 content: '...';/*结尾内容换为 ... */
22 background:url("") repeat-y; /*背景是一个半白半透明的图片*/
23 }
24 </ style >
25 </ head >
26 < body >
27 < p >
28 凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、
中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,
服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。凭借专业的精神、优质的团队、
周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、
联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、
旅游娱乐等重点领域。
29 </ p >
30 </ body >
31 </ html >
|
效果:

小伙伴们你们有没有更好地方法呢,快拿出来分享分享吧!
以上就是分享文字溢出隐藏实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何让文字居于div的底部
怎样实现点击按钮文字变成input框,点击保存变成文字的实现的效果
css怎么控制文字不换行
html代码制作滚动文字
html如何只显示部分td文字
css中文字超出div怎么办
css如何隐藏溢出来的文字
css中怎么把文字加粗
分享文字溢出隐藏实例
css如何实现文字不能选中
更多相关阅读请进入《省略号》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 分享文字溢出隐藏实例