Javascript 检测文本是否溢出

如何检测文本是否溢出？例如，以下文本比其div容器允许的长度长。如何在javascript中检测到这一点

<div style="max-width: 100px; white-space:nowrap; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

Lorem ipsum dolor sit amet，奉献精英

如果使用jQuery，可以尝试将div的宽度与其滚动宽度进行比较

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}

---

为了便于说明，假设您的div具有

id=“d”

，那么您可以执行以下操作：

var d = document.getElementById('d'),
    dWider;
d.style.maxWidth = '9999em';
d.style.overflow = 'visible';
dWider = d.offsetWidth > 100;
d.style.maxWidth = '100px';
d.style.overflow = 'hidden';

---

如果文本溢出，则var

dWider

将为true；如果文本没有溢出，则为false。

jQuery插件，用于检查文本是否溢出，写得不是很好，但工作方式与假设的工作方式相同。发布此消息是因为我在任何地方都找不到一个可用的插件

jQuery.fn.hasOverflown = function () {
   var res;
   var cont = $('<div>'+this.text()+'</div>').css("display", "table")
   .css("z-index", "-1").css("position", "absolute")
   .css("font-family", this.css("font-family"))
   .css("font-size", this.css("font-size"))
   .css("font-weight", this.css("font-weight")).appendTo('body');
   res = (cont.width()>this.width());
   cont.remove();
   return res;
}

jQuery.fn.hasOverflown=函数（）{
var-res；
var cont=$（''+this.text（）+''）.css（“显示”、“表格”）
.css（“z指数”，“1”）.css（“位置”，“绝对”）
.css（“字体系列”，此.css（“字体系列”））
.css（“字体大小”，此.css（“字体大小”））
.css（“font-weight”，this.css（“font-weight”）.appendTo（“body”）；
res=（cont.width（）>this.width（））；
继续删除（）；
返回res；
}

您可以在显示元素之前检测文本是否适合。所以你可以使用这个函数，它不需要元素出现在屏幕上

function textWidth(text, fontProp) {
    var tag = document.createElement('div')
    tag.style.position = 'absolute'
    tag.style.left = '-99in'
    tag.style.whiteSpace = 'nowrap'
    tag.style.font = fontProp
    tag.innerHTML = text

    document.body.appendChild(tag)
    var result = tag.clientWidth
    document.body.removeChild(tag)
    return result;
}

用法：

if (textWidth('Text', 'bold 13px Verdana') > elementWidth) {
    ...
}

---

我还必须使用

innerWidth（）

而不是

width（）

来解释填充。编辑后使用innerWidth（）而不是width（），并且。。。最好使用“jQuery”而不是“$”…）@主题：实际最好的方法是将jQuery代码包装在一个闭包中，使用

$

并将其作为参数传递给

jQuery

。这就是jquerycore所做的。e、 g.

（函数（$）{//code}）（jQuery）@TheCuBeMan，但该模式确实使用jQuery。它在闭包范围中将其别名为$。无碰撞。当scrollWidth为零时，这对我很有效，这似乎有时会发生（还不知道为什么…），非常有用！基本上，我只是拼凑了我自己的简化版，以循环浏览页面的元素，如果任何元素大于它们的容器，则一次减少1px字体，直到适合为止。：-）很好的插件，但是正确的“overflow”过去式是“overflow=”）这很好用！你能解释一下它是怎么工作的吗？据我所知，这比您在这里可以找到的
isEllipsisActive
函数要好，因为当溢出文本的宽度与没有溢出的文本的宽度相同时，它甚至适用于某些边缘情况和
文本溢出：省略号
此选项有效，但仅适用于包含单行文本的元素。对于具有固定宽度且跨越多行的图元，请修改此函数以测试高度而不是宽度。