overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; font-size: 0.9rem; height: 2.5rem; } 文本截断效果
.entry_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 上面CSS 第一行是设置强制文本在一行内输出,第二行是设置溢出处理方式,这里是隐藏,第三行是设置文本溢出的处理方式,这里是末尾加上省略号。 本文参与腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
EN单行显示省略号 // 溢出隐藏 overflow: hidden; // 溢出的文本呈现为省略号 text-overflow:ellipsis;...
overflow-ellipsis first Lorem ipsum dolor sit p { width: 200px; border: 1px solid; padding: 2px 5px; /* BOTH of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-ellipsis.first { directio...
使用-webkit-line-clamp: 2;限制文本显示的行数为两行。 实现超出两行文本的英文显示省略号(...): 使用overflow: hidden;隐藏超出的文本内容。 使用text-overflow: ellipsis;在文本溢出时显示省略号。 测试并确保在各种浏览器上的兼容性: 请注意,-webkit-line-clamp是一个非标准的CSS属性,主要用于基于WebKit...
在CSS 中,可以使用text-overflow、white-space和overflow来配置文本省略(即当文本内容超过容器宽度时,显示为省略号...)。以下是实现单行和多行文本省略的配置方法。 1. 单行文本省略 要实现单行文本省略,可以使用以下 CSS: .ellipsis{white-space: nowrap;/* 禁止文本换行 */overflow: hidden;/* 隐藏超出容器的文...
CSS ellipsis 单行 .single-line{width:462px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } 多行 .multi-lines{width:462px;display: block;overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;
*/white-space:nowrap;/* 防止换行 */overflow:hidden;/* 隐藏溢出部分 */text-overflow:ellipsis;/...
CSS ellipsis 单行 .single-line{ width: 462px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 1. 2. 3. 4. 5. 6. 多行 .multi-lines{ width: 462px; display: block; overflow: hidden; white-space: normal; text-overflow: ellipsis; ...
方法2 Text-overflow: -o-ellipsis-lastline 从10.60版开始,Opera增加了在多行块上剪切文本的功能。 老实说,我从未尝试过,理论上只在Opera 10.6以后可以使用,不建议使用。 方法3 JavaScript #block-with-text { height: 3.6em; } function ellipsizeMultiLineText(id) { ...