1200字范文 > 前端css 文本超出就隐藏并且显示省略号

前端css 文本超出就隐藏并且显示省略号

时间：2020-04-20 06:05:16

文本超出加省略号

单行文本溢出显示省略号

overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行

多行文本超出隐藏

第一种

div{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 从上到下垂直排列子元素-webkit-line-clamp:2; //显示的行数}

第二种

div {width: 820px;line-height: 25px;word-break: break-all;text-overflow: ellipsis;/** 对象作为伸缩盒子模型显示 **/display: -webkit-box;/** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-box-orient: vertical;/** 显示文本的行数 **/-webkit-line-clamp: 3;/** 超出的内容隐藏 **/overflow: hidden;}

单词超出加省略号

单行单词溢出显示省略号

width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

多行单词溢出显示省略号

overflow: hidden; //超出的文本隐藏text-overflow: ellipsis; //溢出用省略号显示display: -webkit-box;-webkit-line-clamp: 2; /*数字就是想展示的行数，设置为1的时候就变成显示单行了*/-webkit-box-orient: vertical;word-wrap: break-word; /*允许长单词换行单词换行,这个是关键,若是不加的话就不起做用,必须有!!!*/

跨浏览器兼容的方案

注意：IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如…去模拟；要支持IE8，需要将::after替换为:after

p{position:relative;line-height:1.4em;/*设置容器高度为3倍行高就是显示3行*/height:4.2em;overflow:hidden;}p::after{content:'...';font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;background:#fff;}

表格中单行超出隐藏

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}td{width:100%;word-break:keep-all; // 不换行white-space:nowrap; // 不换行overflow:hidden;text-overflow:ellipsis;}