css多行超出显示点_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内核浏览器专用方法，所以可以用在移动端。代码：

p {

width: 100px;

/*height: 300px;*/

background-color: #2b542c;

overflow: hidden;

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

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式--->vertical为垂直排列*/

}

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.

上面代码中：

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

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

【注意】

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

【垮浏览器兼容的方案】

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

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

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

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

文本溢出父级元素时：

Title

*{

margin: 0;

padding: 0;

}

#view{

line-height: 25px;

}

s = '这是一个文本这是一个文本这是一个ssssss文本这是一个文本sss这是一个文本这是一个文本'

el = document.getElementById('view');

n = el.offsetHeight;

for(i=0; i

el.innerHTML = s.substr(0,i);

if(n < el.scrollHeight) {

el.style.overflow = 'hidden';

el.innerHTML = s.substr(0,i-3) + '...';

break;

}

}

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