当前位置：文江博客话题详情

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

发布于 2024-07-29 15:49:19 字数 287 浏览 3 评论 0原文

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

假设您想要断开一个长文本，这样它就不会溢出固定宽度的容器，但您希望该行尽可能靠近边框断开，因此猜测在哪里插入 s 并不是一个干净的解决方案。

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

有人做过这样的事吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可遇━不可求 2024-08-05 15:49:19

这是一个完整的“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 的这种方法可能有点不稳定，但我怀疑它是最接近您将获得完全跨浏览器的解决方案。

Here is a complete "Heath Robinson" (does that reference travel well?) approach.

<!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>

The critical thing here is the configuration of the span element. This element will not impact the visual appearance of the page. Its scrollWidth property will return the length of the text it contains. Of course you would need to set any font style attributes to get a reasonable value.

According to quirksmode site Opera may be a little flaky with this approach but I suspect its the closest you will get to a fully cross-browser solution.

回复收藏 0 原文

~没有更多了~