p{width:300px;/*限制元素宽度*/line-height:30px;border:1pxsolid#ccc;overflow: hidden;/*文本超出隐藏*/text-overflow: ellipsis;/*文本超出显示省略号*/white-space: nowrap;/*超出的空白区域不换行*/} 优点: 兼容性好,对各大主流浏览器有好的支持 响应式截断,根据不同宽度做出调整 文本溢出范围才显示省...
一、单行超出显示省略号 如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行; 详细步骤: 第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略) 第二步(溢出隐藏)overflow:hidden; 第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号) w...
1.单行省略 .singe-line { text-overflow: ellipsis; overflow: hidden; word-break:break-all; white-space: nowrap; }单行省略 {{ content }} 2.两行省略 .double-line { word-break:break-all; overflow: hidden; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }两行省...
box-sizing: border-box; /* 单行显示省略号 */ overflow: hidden;text-overflow: ellipsis;...
css实现单行文本的溢出显示省略号应该用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 css单行文本超出省略号的实现代码: <!DOCTYPEhtml> 省略号test *{ margin:0; padding:0; } body{ padding:10px; font-family:Arial; } #...
1 首先编写正常状态超出文本隐藏的效果；代码如下overflow: hidden;2 下面是单行超出文本出现省略号的效果；代码如下overflow:hidden; text-overflow:ellipsis; white-space:nowrap这里最好给标签添加上高度，或者设置文字不能换行 3 显示单行省略号效果 4 下面是多行超出文本出现省略号的效果；代码如下overflow: hidden;...
1. 单行文本溢出显示省略号 2. 多行文本溢出显示省略号 1. 单行文本溢出显示省略号--必须满足三个条件 /*1. 先强制一行内显示文本*/ white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ ...
单行省略: 代码语言:txt 复制 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 两行省略: 代码语言:txt 复制 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 超出几行省略 */ ...
text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。 这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器 .multi-line { border: 1px solid #f70505; width: 400px; overflow: hidden; text-overflow: ellipsis; ...