在html中如果要把多余的文字显示为省略号,那么有以下几种方法:
单行文本:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .box{ width: 200px; background-color: aqua; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> </head> <body> <div class="box">讲的是克辣椒的洒落看见斯科拉讲的是拉开讲的是了卡机快来撒建档立卡时间到了撒快乐到家撒了看见撒快乐到家撒健康了</div> </body> </html>
多行文本:
1.利用-webkit-line-clamp属性
.box{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border:solid 1px black; }
缺点:仅适用于webkit内核或移动端页面。在火狐,ie等浏览器并不支持。
2.用伪元素模拟实现
设定固定宽高,多余部分隐藏,在结尾用包含省略号(...)的元素覆盖部分内容。
.box{ height: 200px; width: 200px; position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } .box::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 -20px 1px 45px; background-color:white; }
这里用一个包含了省略号,且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
这种思路实现较为简单,兼容性也比较好。
注:如果要兼容ie6或7,则不能使用伪元素,可以使用一个<div>或者<span>标签。如果要支持ie8,需要将::after写成:after。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“html中把多余文字转化为省略号的实现方法方法”评论...
更新日志
2024年05月13日
2024年05月13日
- 大张伟《大张伟歌曲合集》[320K/MP3][89MB]
- 郭金发.2002-台湾红歌100年·台语精选辑CD13【乡城】【WAV+CUE】
- 殷正洋.1994-等一个人【巨石】【WAV+CUE】
- 王馨平.2014-Truly【秘密花园】【WAV+CUE】
- 邓涛-精选十五首HIFI最爱天碟《试音邓涛》[WAV分轨]
- 绚香《ayakasHistory2006-2009》24bit-96kHz【Hi-Res】【flac】
- 群星-重力加速度·蓝白经华连串曲蓝与白-1991-WAV+CUE
- 孙楠《孙楠歌曲合集》[320K/MP3][252.2MB]
- 刀郎《刀郎歌曲合集》[320K/MP3][362.6MB]
- 杨培安《杨培安歌曲合集》[320K/MP3][257.1MB]
- [In-AkustikINAK7803]VA-ThePinnacleOfCheskyVoiceChesky非凡女声2017[SACD-ISO]
- 王之炅薛颖佳-中国小提琴名曲(2.8MHzDSD)DSF
- 群星-重力加速度·蓝白经华连串曲蓝与白-1991-WAV+CUE
- 群星-将爱情进行到底电视剧原声音乐中唱-1999-WAV+CUE
- [ABC唱片]徐刚-独步外滩WalkingOntheBundPerryShi(SACD).iso