css实现单行、多行文本溢出显示省略号(…)

青春..荒唐

浏览: 972984 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

一、单行文本溢出显示省略号(…)

省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

p{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上面为p标签设置的3个css属性是必须，缺一不可，其中：

text-overflow:定义文本溢出时如何处理，有2个有效值：

①clip：当内联内容溢出块容器时，将溢出部分裁切掉

②ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）

详解：

（1）关于overflow: hidden

这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是p标签的属性，需要和overflow的普通用法区分开来

①overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素

②overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;

实现p元素隐藏自身的溢出并设置（...）的效果

（2）关于text-overflow: ellipsis;

这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’

（3）关于white-space: nowrap

它的作用是让文本不换行，这是overflow:hidden和text-overflow：ellipsis生效的基础！没有它overflow:hidden和text-overflow：ellipsis无法生效！（在单行文本溢出省略这一案例中）

但是这个属性并不支持多行文本溢出显示省略号。接下来重点说一说多行文本溢出显示省略号，如下。

二、多行文本溢出显示省略号(…)

用CSS实现多行溢出隐藏的代码非常简单，但是兼容性也相对较低。

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

①display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

②-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

③text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

实际效果图：

这里有两行文本，第二行文本溢出时，隐藏超出文本并显示'...'

与单行文本不同的是，这里不能使用上面的text-overflow属性，这里使用webkit内核浏览器专用方法，所以可以用在移动端。代码：

<style>
p {
width: 100px;
/*height: 300px;*/
background-color: #2b542c;
overflow: hidden;
display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式--->vertical为垂直排列*/
}
</style>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
       Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
       natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores
       aliquid, possimus iste.</p>
</body>

上面代码中：

①-webkit-line-clamp：设置文本最多显示行数。

②-webkit-box-orient：不设置将不显示省略号（...）

【注意】

①未设置高度时按照行数显示，设置后仅仅会在设置的行显示省略号（...）

【垮浏览器兼容的方案】

网上查询后都说比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；但经过测试，在IE局限性较大

下面介绍一种JS兼容写法：

先看看我们最终实现的demo:

①在文本没有溢出父级元素时：

文本溢出父级元素时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #view{
            line-height: 25px;
        }
    </style>
</head>
<body>
<div id='view' style='border:1px solid red;width:200px;height:50px;overflow:auto'></div>
<script>
    s = '这是一个文本这是一个文本这是一个ssssss文本这是一个文本sss这是一个文本这是一个文本'
    el = document.getElementById('view');
    n = el.offsetHeight;
    for(i=0; i<s.length; i++) {
        el.innerHTML = s.substr(0, i);
        if(n < el.scrollHeight) {
            el.style.overflow = 'hidden';
            el.innerHTML = s.substr(0, i-3) + '...';
            break;
        }
    }
</script>
</body>
</html>

首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度：

1溢出显示滚动条时-----scrollHeight>offsetHeight

2没有溢出时----scrollHeight=offsetHeight

el = document.getElementById('view'); n = el.offsetHeight;表示的是取到当前包裹文本的父级元素的高度， el.innerHTML = s.substr(0, i);表示在for循环中取出长度递增的文段， '这'--> '这是' --> '这是一'，当n < el.scrollHeight也就是当前文本高度<滚动条内的内容的高度，代表着刚好达到溢出的界限，此时执行if内的语句el.style.overflow = 'hidden';el.innerHTML = s.substr(0, i-3) + '...'; break;将父级元素view的overflow设置为hidden，并且将末尾的三个文字用...取代，同时跳出for循环

perfect!这样我们就实现了优雅的解决方案

②jQuery限制字符字数的方法

//限制字符个数
$(".zxx_text_overflow").each(function(){
  var maxwidth=23;
  if($(this).text().length > maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+'...');
  }
});

分享到：

CSS hack详解 | CSS3 transform 属性

2018-01-05 21:06
浏览 1195
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论