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

沉着前进 2018-01-05

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

       省略号在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;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

实际效果图:

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

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

与单行文本不同的是,这里不能使用上面的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:

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

css实现单行、多行文本溢出显示省略号(…)
文本溢出父级元素时:
css实现单行、多行文本溢出显示省略号(…)
<!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所表示的高度:

相关推荐