Question

您是否知道一种良好的跨浏览器方式来了解文本行的宽度，以便您可以将其精确地分解以适应固定宽度？

假设您要打破一个长文本，因为它不会溢出固定宽度的容器，但您希望该行可能最接近边界，因此猜测插入s的位置并不是一个干净的解决方案。

我想调查一下，我想这可以通过一个不可见的div来完成，然后在其中打印行并使用Javascript检查div的宽度或类似的东西。

有人做过这样的事吗？

*（焦点不是自动换行，这只是我现在想到的应用程序，但知道文本的宽度是我想要的）

Answer 1

这是一个完整的“Heath Robinson”（这个参考旅行很好吗？）方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript">
        function txtContent_onchange()
        {
            var span = document.getElementById("spanMeasure")
            span.innerHTML = "";
            span.appendChild(document.createTextNode(this.value));
            document.getElementById("txtWidth").value = span.scrollWidth;

        }
    </script>
    <style type="text/css">
        #spanMeasure 
        {
            position:absolute;
            top:0px;
            left:0px;
            visibility:hidden;
            width:10px;
            white-space:nowrap;
            overflow:hidden
        }
    </style>
</head>
<body>

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br />
    <input id="txtWidth" />
    <span id="spanMeasure"><span>

</body>
</html>

这里关键的是span元素的配置。此元素不会影响页面的视觉外观。其scrollWidth属性将返回其包含的文本的长度。当然，您需要设置任何字体样式属性才能获得合理的值。

根据quirksmode网站，Opera可能有点不稳定，但我怀疑它是最接近完全跨浏览器的解决方案。

了解文本行在HTML中的自动换行和其他应用程序的宽度

1 个答案: