多余文字省略的几种方法

2017-12-21

前言

这次说的多余文字省略，以前是不知道这个需求的，一开始的时候还闹了个笑话，直接把有省略号的一段文字放上去了，我觉得当时的测试是非常无语的！haha…

一、文字一行显示，超出部分显示省略号

主要css如下：

display: block;  /*不是块级标签要先转换为块级标签*/
width: 4rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

简单说一说这几个属性：

overflow:hidden; 超出部分隐藏；
white-space:nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到<br/>标签为止;
text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。

测试代码如下：

<style>
 .paragraph{
      width: 200px;
      height: 200px;
      overflow : hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: 1px solid #000;
	}       
</style>
<div class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut cupiditate, eos et exercitationem minus non obcaecati rerum tenetur. Blanditiis excepturi magnam magni nesciunt pariatur, quae quaerat rem repellendus soluta!
    <a href="#"> 这是一个a链接</a>
    <span>这是一个span标签</span>
    <i>这是一个i标签</i>
    <div style="display: inline-block;">这是一个div标签1</div>
    <div>这是一个div标签2</div>
    <p>这是一个p标签！</p>
</div>

运行结果为：

结论：块级标签内多余文字省略可以省略行内元素以及行内块元素，但是对块级元素不起作用。

解决方法：对div限制高度，只设置显示一行的高度。

如：将div的高度设置为30px,设置行高为30px。结果如图所示：

二、文字两行或多行显示，超出部分显示省略号

主要css如下：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;	
-webkit-line-clamp: 2;	
-webkit-box-orient: vertical;

简单说一说这几个属性：

-webkit-line-clamp: 2 限制在一个块元素显示的文本的行数;
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示;
-webkit-box-orient: vertical; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

测试代码如下：

<style>
        .paragraph{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
</style>
<div class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut cupiditate, eos et exercitationem minus non obcaecati rerum tenetur. Blanditiis excepturi magnam magni nesciunt pariatur, quae quaerat rem repellendus soluta!
    <a href="#"> 这是一个a链接</a>
    <span>这是一个span标签</span>
    <i>这是一个i标签</i>
    <div style="display: inline-block;">这是一个div标签1</div>
    <div>这是一个div标签2</div>
    <p>这是一个p标签！</p>
</div>

运行结果为：

结论：

1.块级标签内多余文字省略可以省略行内元素以及行内块元素，但是对块级元素不起作用；

2.由于在一行省略，是使用了属性white-space: nowrap; 不让它换行。而多行省略不能设置这个属性，所以出现了上面的情况。

解决方法：对div限制高度，如果省略两行，只设置两行的高度。

如将div设置高度为60px,行高为30px,那么它就只显示两行了。

修改后的效果如图所示：