限制一个div中text显示的行数,并在结尾添加...

[AILINGANGEL]

问题描述

当给一个容器设置一个固定高度height的时候，里面的内容可能显示不全，有些行只能显示一半。

<p class="test">
  WebKit Browsers will clamp the number of lines 
  in this paragraph to 2. Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim 
  ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat. Duis 
  aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur 
  sint occaecat cupidatat non proident, sunt in culpa qui 
  officia deserunt mollit anim id est laborum.
</p>

.test {
   height: 37px;
   overflow : hidden;
   text-overflow: ellipsis;
}

期望结果

只展示那些完全可见的行，只能展示一半的行不显示。

解决方案

• display: -webkit-box
• -webkit-line-clamp: 1 (希望显示几行)
• -webkit-box-orient: vertical

.test {
   overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}