Question

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

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

Answer 1

如果您使用的是jQuery，可以尝试将div的宽度与其scrollWidth进行比较。

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

Answer 2

更好的方法是在显示元素之前检测文本是否适合。所以你可以使用这个不需要元素在屏幕上的功能。

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) {
    ...
}

Answer 3

用于检查文本是否已溢出的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;
}

Answer 4

为了说明的目的，假设你的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。

检测文本是否已溢出

4 个答案: