html设置文本溢出隐藏,CSS文本溢出隐藏(兼容各浏览器)

css

以下都需要设置元素宽度

单行文本

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行文本

webkit、ff或移动端(不兼容IE)

overflow : hidden;

text-overflow: ellipsis;

/* 将对象作为弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 一个块元素显示的文本的行数 */

-webkit-line-clamp: 5;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;

打包后不生效的原因

-webkit-line-clamp: 3;在线上环境被注释掉了

解决：将autoprefixer:false设置为false

webpack.prod.conf.js

new OptimizeCSSPlugin({

cssProcessorOptions: config.build.productionSourceMap

? { safe: true, map: { inline: false }, autoprefixer:false }

: { safe: true, autoprefixer:false }

}),

PC

方式一

这种方式手动实现一个省略号，但是可能实际并没有超出也会出现省略号，可以根据显示的高度来控制省略号显示做优化。另外一个缺点就是有点丑。

.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%);

}

优化

.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(){

//获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号

$('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方式实现，完美兼容，推荐

/*

* 行高 h

* 最大行数 n

* ...省略号容器的宽 w

* 字号 f

*/

.ellipsis {

position: relative;

max-height: 90px; /* h*n */

line-height: 30px; /* h */

padding-right: 14px; /* 将右侧空出一段距离，让省略号显示出来，和下面对应 */

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; /* 视情况调节显示，和上面对应 */

text-align: right;

}

内容

...

通过限制字数来实现

js

let content = '内容'

if (content .length > 50) {

content = content.substring(0, 50)

content += '...'

}

jQuery

$(function(){

$('.jq').each(function(){

var maxwidth=36;

if($(this).text().length>maxwidth){

$(this).text($(this).text().substring(0,maxwidth));

$(this).html($(this).html()+'...');

}

});

})

网站导航