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

Pet*_*uza 5 html javascript xhtml dhtml

您是否知道一种良好的跨浏览器方式来了解文本行的宽度,以便您可以准确地将其打破以适应固定宽度?

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

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

有没有人做过这样的事情?

*(重点不是自动换行,这只是我现在想到的应用程序,但知道文本的宽度是我想要的)

Ant*_*nes 2

这是一个完整的“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>
Run Code Online (Sandbox Code Playgroud)

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

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