在html中如果要把多余的文字显示为省略号,那么有以下几种方法
一、单行文本。
需要自行复制;
/*设置单行文本的固定写法 *//* 设置固定的宽度 */width: 400px;/* 设置文本不换行 */white-space: nowrap;/* 设置多余文本以省略号的形式出现 */text-overflow: ellipsis;/* 裁剪多余的内容 */overflow: hidden;/* 补充一下 多行文本的写法 */
二、多行文本
利用-webkit-line-clamp属性
语法:
-webkit-line-clamp:<number>
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
需要自行粘贴:
/* 设置固定的宽度 */width: 400px;/* 裁剪多余的 */overflow : hidden;/* 多余的以省略号出现 */text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制再一个块元素再文本显示的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;
三、用伪类模拟实现。
设定固定宽高,多余部分裁剪,在结尾用包含::after{content(‘...’)};的元素覆盖部分内容。(模拟实现)
需要代码,自行粘贴:
.p12{height: 200px;width: 400px;position:relative;line-height:1.4em;height:4.2em;overflow:hidden;}.p12::after{content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 -20px 1px 45px;background-color:pink;}
这里用一个包含了省略号,且背景色为粉色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
这种思路实现较为简单,兼容性也比较好。
注:如果要兼容ie6或7,则不能使用伪元素,可以使用一个
或者 标签。如果要支持ie8,需要将::after写成:after。