检测文本是否溢出

IT技术 javascript
2021-03-11 04:58:33

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

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

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

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}
并且......使用“jQuery”而不是“$”总是更好...... :)
2021-04-22 04:58:33
编辑为使用 innerWidth() 而不是 width()
2021-04-24 04:58:33
@TheCuBeMan：实际最好的方法是将 jQuery 代码包装在一个闭包中$，并将其jQuery作为参数传递。这就是 jQuery Core 所做的。例如(function ($) { // code })(jQuery);
2021-04-30 04:58:33
我还必须使用innerWidth()而不是width()考虑填充。
2021-05-05 04:58:33
@TheCuBeMan 但该模式确实使用了 jQuery。它在闭包作用域中将其别名为 $。无碰撞。
2021-05-11 04:58:33

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

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) {
    ...
}
所以非常有帮助！我基本上只是将我自己的Fitty.js 的简化版本组合在一起，循环浏览页面的元素，如果有任何元素大于它们的容器，则一次减小字体 1px，直到它适合为止。:-)
2021-04-23 04:58:33
当 scrollWidth 为零时，这对我有用，这似乎有时会发生（还没有弄清楚为什么......）
2021-05-08 04:58:33

用于检查文本是否溢出的 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;
}
不错的插件，但“溢出”的正确过去时是“溢出”=)
2021-04-27 04:58:33
这有效，但仅适用于包含单行文本的元素。对于跨多行的固定宽度元素，修改此函数以测试高度而不是宽度。
2021-05-02 04:58:33
这很好用！你能解释一下它是如何工作的吗？据我所知，这比isEllipsisActive您在 SO 上可以找到的函数要好，因为即使溢出文本的宽度与没有overflow:hidden;和的文本宽度相同时，它也适用于某些边缘情况text-overflow: ellipsis
2021-05-13 04:58:33

出于说明目的，假设您的 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';

dWider如果文本溢出，则 var将为 true，否则为 false。

其它你可能感兴趣的问题
上一篇下划线：sortBy() 基于多个属性 下一篇如何检查元素是否在屏幕外