在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号
对于文本的溢出,我们可以分成两种形式:
理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现
实现方式也很简单,涉及的css
属性有:
overflow
设为hidden
,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略
white-space:nowrap
,作用是设置文本不换行,是overflow:hidden
和text-overflow:ellipsis
生效的基础
text-overflow
属性值有如下:
text-overflow
只有在设置了overflow:hidden
和white-space:nowrap
才能够生效的
举个例子
<style> p{ overflow: hidden; line-height: 40px; width:400px; height:40px; border:1px solid red; text-overflow: ellipsis; white-space: nowrap; } </style> <p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
效果如下:
可以看到,设置单行文本溢出较为简单,并且省略号显示的位置较好
多行文本溢出的时候,我们可以分为两种情况:
核心的css
代码结构如下:
代码如下所示:
<style> .demo { position: relative; line-height: 20px; height: 40px; overflow: hidden; } .demo::after { content: "..."; position: absolute; bottom: 0; right: 0; padding: 0 20px 0 10px; } </style> <body> <div class='demo'>这是一段很长的文本</div> </body>
实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden
隐藏多余文字
这种实现具有以下优点:
一般文本存在英文的时候,可以设置word-break: break-all
使一个单词能够在换行时进行拆分
纯css
实现也非常简单,核心的css
代码如下:
<style> p { width: 400px; border-radius: 1px solid red; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } </style> <p> 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 </p >
可以看到,上述使用了webkit
的CSS
属性扩展,所以兼容浏览器范围是PC
端的webkit
内核的浏览器,由于移动端大多数是使用webkit
,所以移动端常用该形式
需要注意的是,如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word
属性
还能通过使用javascript
实现配合css
,实现代码如下所示:
css结构如下:
p { position: relative; width: 400px; line-height: 20px; overflow: hidden; } .p-after:after{ content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -moz-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(left, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }
javascript代码如下:
$(function(){ //获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号 $('p').each(function(i, obj){ var lineHeight = parseInt($(this).css("line-height")); var height = parseInt($(this).height()); if((height / lineHeight) >3 ){ $(this).addClass("p-after") $(this).css("height","60px"); }else{ $(this).removeClass("p-after"); } }); })
本文作者:毛超颖
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!