多行顯示并在最后一行截斷文字？
text-overflow基本知識請看上篇文章：
text-overflow: ellipsis;什么時候可能不生效？
單行文字我們?yōu)榱四軌蚪財辔淖值坝猓褂昧?/p>
white-space: nowrap; // 強制文本在一行顯示
如果我確實有多行并在最后一行截斷文字顯示的需求呢？怎么實現(xiàn)以政？
方法1 -Webkit-line-clamp property
優(yōu)點: 最簡單的方法
缺點: 但是很遺憾银室，它不支持跨瀏覽器（在Firefox和Internet Explorer中不起作用）。
-webkit-line-clamp CSS 屬性 可以把 塊容器 中的內(nèi)容限制為指定的行數(shù).
它只有在 display 屬性設(shè)置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 屬性設(shè)置成 vertical時才有效果
在大部分情況下,也需要設(shè)置 overflow 屬性為 hidden, 否則,里面的內(nèi)容不會被裁減,并且在內(nèi)容顯示為指定行數(shù)后還會顯示省略號(ellipsis ).
當他應用于錨(anchor)元素時,截取動作可以發(fā)生在文本中間,而不必在末尾.
使用方法：
.block-with-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
方法2 Text-overflow: -o-ellipsis-lastline
從10.60版開始，Opera增加了在多行塊上剪切文本的功能挟纱。 老實說，我從未嘗試過黄琼，理論上只在Opera 10.6以后可以使用樊销，不建議使用。
方法3 JavaScript
#block-with-text {
height: 3.6em;
}
function ellipsizeMultiLineText(id) {
var element = document.getElementById(id);
var words = element.innerHTML.split(' ');
while(element.scrollHeight > element.offsetHeight) {
words.pop();
element.innerHTML = words.join(' ') + '...';
}
}
ellipsizeMultiLineText('block-with-text');
方法4 純CSS解決 & 跨瀏覽器
優(yōu)點
- 純CSS
- 自適應 Responsive
- 改變大小后或者 字體加載事件后 不需要重新計算
- 跨瀏覽器
缺點
- 文字小于指定行數(shù)的時候脏款，我們需要一個背景色來掩蓋‘…’
- 我們需要空間來放‘…’, 而且如果父節(jié)點
overflow: hidden或者overflow: auto我們需要去掉stylemargin-right: -1em;.
實現(xiàn)方法
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
實現(xiàn)原理
- 大于3行時
:before 的內(nèi)容"..." 在右下角, 因為文字被justify （text-align: justify;）不會看到文字與"..."之間有空隙:
去除CSS text-align: justify;會看到文字與"..."之間有空隙:
-
小于3行時
看不到"..."
-
等于3行時
看不到"..."
方法5 純SCSS解決 & 跨瀏覽器
因為方法4中的缺點，所以寫了個SCSS mixin裤园。這樣的話使用起來也更方便撤师，也有復用性。
CodePen multiline例子鏈接
<p class="block-with-text">1.大于三行例子：最簡單的方法拧揽，但是很遺憾剃盾，它不支持跨瀏覽器,在Firefox和Internet Explorer中不起作用. CSS屬性可以把塊容器中的內(nèi)容限制為指定的行數(shù).它只有在 display屬性設(shè)置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient屬性設(shè)置成vertical時才有效果在大部分情況下,也需要設(shè)置overflow屬性為hidden, 否則,里面的內(nèi)容不會被裁減,并且在內(nèi)容顯示為指定行數(shù)后還會顯示省略號(ellipsis )</p>
<p class="block-with-text">2.小于一行的例子，不會出現(xiàn)“...”在文末</p>
<p class="block-with-text" style="width: 250px;">3. 2.5 行的例子: 最簡單的方法淤袜，但是很遺憾痒谴，它不支持跨瀏覽器,在Firefox和Internet Explorer中不起作用.</p>
body {
margin: 0;
padding: 50px;
font: 400 14px/1.2em sans-serif;
background: white;
}
p {
width: 500px;
}
/* mixin for multiline */
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
overflow: hidden;
position: relative;
line-height: $lineHeight;
max-height: $lineHeight * $lineCount;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
&:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
&:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: $bgColor;
}
}
.block-with-text {
@include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);
}
The reference link
微信公眾號：嵐坤爺
個人博客地址：http://liyuankun.top
知乎專欄：嵐坤爺?shù)那岸?機器學習知識庫
簡書：Muzilan
Github：catherineliyuankun
