Question

我在固定宽度的div中显示不同字符和长度的文本字符串。我想在分配的空间中尽可能多地填充文本。我目前的方法是以下列方式限制文本字符的数量

var n = //some number
string = string.substr(0,n);

这种方法的问题在于不同的字符具有不同的宽度，因此当它可以覆盖溢出时，它通常会留下未使用的空间。我已经尝试给包含div提供以下css属性。

div{
   width:200px
   white-space:nowrap
}

但是一旦文字溢出宽度，文字仍会包裹到下一行。有人可以帮助我解决这个问题。

Answer 1

您可以尝试text-overflow

来自quirks mode：

文本溢出仅在以下情况下发挥作用：

该框有溢出而不是可见（溢出：可见文本只是流出框）   该框具有空格：nowrap或类似于约束文本布局方式的方法。（如果没有这个，文本将换行到下一行）

样式改变：

div{
   width:200px;
   white-space:nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

Working demo

Answer 2

使用如下所述的方法计算文本的实际宽度：https://coderwall.com/p/kdi8ua。

然后继续添加字符，直到宽度大于元素的宽度，然后删除1。

以下是链接到以下网站的功能：

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.html(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

优化有限空间的文本长度

2 个答案: