单行、多行文本显示省略号

2018-04-13

实现单行文本溢出省略号展示

p {
    text-overflow:ellipsis;//text-overflow属性规定文本溢出时的操作
    white-space: nowrap;//源文档中的空白符,如空格、换行；pre保持原格式,nowrap不换行,normal将空格合并为一个并忽略换行
    overflow: hidden;//
    /*width: 3em;*/
}

实现多行文本溢出省略号展示

只在webkit内核浏览器和移动端有用:

p {
    display: -webkit-box;//设置展示为弹性伸缩盒子
    -webkit-line-clamp: 2;//显示的文本行数
    -webkit-box-orient: vertical;//子元素排列方式
    overflow: hidden;
}

解决跨浏览器兼容性:任何时候都会带有省略号，需要配合js使用

p {
    position: relative;
    line-height: 1.4em;
    height: 4.2em;//需为line-height的整数倍
    overflow: hidden;
}

p::after {
    content: '...';
    position: absolut;
    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%);
}