0

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

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

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

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

但是一旦超出宽度，文本仍然会换行到下一行。有人可以帮助我解决这个问题的好方法。

4

2 回答 2

1

你可以试试text-overflow

从怪癖模式：

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

该框具有除可见之外的溢出（溢出：可见，文本只是从框中流出）该框具有空格：nowrap 或限制文本布局方式的类似方法。（没有这个，文本将换行到下一行）

风格变化：

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

工作演示

于 2013-08-10T01:12:59.063 回答
0

使用此处描述的方法计算文本的实际宽度：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();
};
于 2013-08-10T01:10:42.017 回答