检测文字是否溢出

如何检测文本是否溢出？ 例如，下面的文本比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-flowed } 

Answer 2

jQuery插件用于检查文本是否溢出，写得不是很好，但工作，因为它假定工作。 发布这个，因为我没有find这个任何地方的工作插件。

 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 3

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

 function textWidth(text, fontProp) { var tag = document.createElement("div"); tag.style.position = "absolute"; tag.style.left = "-999em"; 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 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。