p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
以上 CSS 代码可以保证文本在限制宽度内只显示两行,并在尾部显示 ellipsis(省略号)。这个效果的实现需要使用一些较新的 CSS 技术,如-webkit-line-clamp
和-webkit-box-orient
。
需要注意的是,这个效果对中英文字符和标点符号的处理可能不同。例如,对于一个包含英文和汉字的段落,英文单词和标点符号将被视为独立单词进行处理,可能导致不符合预期的结果。
总的来说,CSS 的文字截断功能是一种简单而有用的技术,特别适用于需要保证页面排版美观的情况。