ellipse 省略号

# ellipse 省略号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>程(runoob.com)</title>
<style> 
.k1{
	width:300px;
	height:100px;
	margin:auto;
	border:1px solid #F08080;
	text-overflow:  ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

</style>
</head>
<body>
<div class="k1">1222222士大夫阿斯蒂芬个废弃物而放弃为·撒旦法·水电费三方·222</div>

</body>
</html>

{
	width:300px;
	text-overflow:  ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

# 多行省略内容

# -webkit-line-clamp

CSS 属性可以把块容器中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

对IE浏览器不兼容

#k {
	  width: 300px;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	  overflow: hidden;
}

# 其他方案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        body,html{
            padding: 0;
            margin: 0;
        }
        *{
            padding: 0;
            margin: 0;
        }
       .multiple-line-wrapper, .multiple-line, .multiple-line .empty-space {
       	  display: inline-block;
       	}
       	.multiple-line-wrapper {
       	  display: inline-block;
       	  line-height: 1.4em;
       	  max-height: 2.6em; /* 1.4em * (N - 1) + 1em + (0.4em / 2)。N为要显示的行数，1.4em为行高 */
       	  position: relative;
       	  overflow: hidden;
       	  width: 200px;
       	}
       	
       	
       	 /*
       	 ==》存在小问题：
       	 1、刚好能显示下时会显示省略号
       	 2、省略号和文字交接的地方存在有一根亮黄的线
           */
       	.multiple-line-wrapper:after, .multiple-line:after {
       	  position: absolute;
       	  right: 0;
       	  bottom: 0;
       	  display: inline-block;
       	  width: 1em;
       	  height: 1.4em;
       	  background: white;
       	}
       	.multiple-line-wrapper:after {
       	  content: '...'; 
       	}
       	.multiple-line {
       	  position: relative;
       	}
       	 /*设置和省略号宽度一样。*/
       	.multiple-line .empty-space {
       	  width: 1em;
       	}
       	 /*要比外层的层级来得大*/
       	.multiple-line:after { 
       	  content:'  ';
       	  z-index: 10;
       	}
       
     
    </style>
    <body>
      <span class="multiple-line-wrapper">
      	  <span class="multiple-line">
      	   志向不过是记忆的奴隶，生气勃勃地降生。
      	   <span class="empty-space"></span>
      	  </span>
          </span>
      	<br/>
      	
          <span class="multiple-line-wrapper">
      	  <span class="multiple-line">
      	   志向不过是记忆的奴隶，生气勃勃地降生。但却很1343
      	   <span class="empty-space"></span>
      	  </span>
          </span>
      	<br/>
      	
          <span class="multiple-line-wrapper">
      	  <span class="multiple-line">
      	   志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。
      	   <span class="empty-space"></span>
      	  </span>
          </span>
      
  
    </body>
</html>

← 简化颜色渐变 →