css显示两行或多行文字，再显示省略号

最新推荐文章于 2025-07-19 15:06:59 发布

原创最新推荐文章于 2025-07-19 15:06:59 发布 · 981 阅读

0 ·

CC 4.0 BY-SA版权

CSS 同时被 3 个专栏收录

4 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

Web前端

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的两行文本自动换行的方法，通过计算字符宽度来确保文本能在限定的宽度内正确换行。适用于前端开发中需要对文本进行格式化处理的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

width; 300px;

height: 30px;

display: block;

</style>

$(function () {
$(".two-lines").each(function () {
var $this = $(this);
var _width = $this.css("width"), width = parseInt(_width.substring(0, _width.length - 2)); //显示框的长度
var _text = $this.text();
var tot = 0.0, str = _text, add = $this.css("font-size"), num = parseInt(add.substring(0, add.length - 2)); //字或字母的长度
var _char;
num += $this.css("font-weight") == "bold" ? 1 : 0;

for (var i = 0; i < _text.length; ++i) {
_char = _text.charCodeAt(i);
if (_char >= 0 && _char <= 128) tot += num / 2;
else tot += num;
console.log("tot: " + tot);
if (tot >= width) {
str = _text.substring(0, i) + "<br />" + _text.substring(i);
break;
}
}

$this.html("<nobr>" + str + "</nobr>");
console.log("width: " + width);
})
})