html中把多余笔墨转化为省略号的实现要领要领
|
在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。 到此这篇关于html中把多余笔墨转化为省略号的实现要领要领的文章就先容到这了,更多相干html多余笔墨转化为省略号内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
