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; } 文本截断效果如图: 注意: font-size: 0.9rem; height: 2.5rem; overflow : hidden; ...
使用-webkit-line-clamp: 2;限制文本显示的行数为两行。 实现超出两行文本的英文显示省略号(...): 使用overflow: hidden;隐藏超出的文本内容。 使用text-overflow: ellipsis;在文本溢出时显示省略号。 测试并确保在各种浏览器上的兼容性: 请注意,-webkit-line-clamp是一个非标准的CSS属性,主要用于基于WebKit...
单行显示省略号 // 溢出隐藏 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...
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;
(2). 可以给定容器宽度限制,超出部分省略 代码语言:javascript 代码运行次数:0 运行 AI代码解释 .product-buyer-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 代码语言:javascript 代码运行次数:0 运行 AI代码解释
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit...
方法2 Text-overflow: -o-ellipsis-lastline 从10.60版开始,Opera增加了在多行块上剪切文本的功能。 老实说,我从未尝试过,理论上只在Opera 10.6以后可以使用,不建议使用。 方法3 JavaScript #block-with-text { height: 3.6em; } function ellipsizeMultiLineText(id) { ...
CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 one line, 遇到多行的时候只能用 JS. 后来出了 line-clamp 终于把 multiple line ellipsis 解决了. 参考: stackoverflow – Limit text length to n lines using CSS Can I use line-clamp ...
1、text-overflow: ellipsis; 这里的重点样式是 text-overflow: ellipsis; 不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。 要实现溢 CSS 空白符 省略号