css
以下都需要設(shè)置元素寬度
單行文本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本
webkit疏日、ff或移動端(不兼容IE)
overflow : hidden;
text-overflow: ellipsis;
/* 將對象作為彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 一個塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 5;
/* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
打包后不生效的原因
-webkit-line-clamp: 3;在線上環(huán)境被注釋掉了
解決：將autoprefixer:false設(shè)置為false
webpack.prod.conf.js
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false }, autoprefixer:false }
: { safe: true, autoprefixer:false }
}),
PC
方式一
這種方式手動實現(xiàn)一個省略號偿洁，但是可能實際并沒有超出也會出現(xiàn)省略號，可以根據(jù)顯示的高度來控制省略號顯示做優(yōu)化沟优。另外一個缺點就是有點丑涕滋。
.limit-ellipsis {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
.limit-ellipsis::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
優(yōu)化
.limit-ellipsis {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
overflow:hidden;
}
.limit-ellipsis::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
$(function(){
//獲取文本的行高，并獲取文本的高度挠阁，假設(shè)我們規(guī)定的行數(shù)是五行宾肺，那么對超過行數(shù)的部分進行限制高度，并加上省略號
$('p').each(function(i, obj){
var lineHeight = parseInt($(this).css("line-height"));
var height = parseInt($(this).height());
if((height / lineHeight) >3 ){
$(this).addClass("limit-ellipsis")
$(this).css("height","4.2em");
}else{
$(this).removeClass("limit-ellipsis");
}
});
})
方式二
純Css方式實現(xiàn)侵俗，完美兼容锨用，推薦
<!DOCTYPE html><html><body>
<style>
/*
* 行高 h
* 最大行數(shù) n
* ...省略號容器的寬 w
* 字號 f
*/
.ellipsis {
position: relative;
max-height: 90px; /* h*n */
line-height: 30px; /* h */
padding-right: 14px; /* 將右側(cè)空出一段距離，讓省略號顯示出來隘谣，和下面對應(yīng) */
overflow: hidden;
}
.ellipsis-container {
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* n */
font-size: 50px; /* w */
color: transparent;
text-align:justify; /* 讓文字兩端對齊增拥，顯示更好看 */
}
.ellipsis-content {
color: #000; /* 文字顏色 */
display: inline-block;
vertical-align: top;
font-size: 22px; /* f */
}
.ellipsis-ghost {
position:absolute;
z-index: 1;
top: 0;
left: 50%;
width: 100%;
height: 100%;
}
.ellipsis-ghost:before {
content: "";
display: block;
float: right;
width: 50%;
height: 100%;
}
.ellipsis-placeholder {
content: "";
display: block;
float: right;
width: 50%;
height: 90px; /* h*n */
}
.ellipsis-more {
float: right;
font-size: 22px; /* f */
width: 50px; /* w */
height: 30px; /* h */
margin-top: -30px; /* -h */
color: #999999; /* 省略號顏色 */
position: relative;
left: 14px; /* 視情況調(diào)節(jié)顯示，和上面對應(yīng) */
text-align: right;
}
</style>
<div class="ellipsis">
<div class="ellipsis-container">
<div class="ellipsis-content">內(nèi)容</div>
<div class="ellipsis-ghost">
<div class="ellipsis-placeholder"></div>
<div class="ellipsis-more">...</div>
</div>
</div>
</div>
</body></html>
通過限制字?jǐn)?shù)來實現(xiàn)
js
let content = '內(nèi)容'
if (content .length > 50) {
content = content.substring(0, 50)
content += '...'
}
jQuery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$('.jq').each(function(){
var maxwidth=36;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});
})
</script>
