Pet*_*uza 5 html javascript xhtml dhtml
您是否知道一种良好的跨浏览器方式来了解文本行的宽度,以便您可以准确地将其打破以适应固定宽度?
假设您想要打破一个长文本,因为它不会溢出固定宽度的容器,但是您希望该行可能最接近边界,因此猜测插入s的位置并不是一个干净的解决方案.
我想调查一下,我想这可以通过一个不可见的div然后在其中打印线并使用Javascript检查div的宽度或类似的东西来完成.
有没有人做过这样的事情?
*(重点不是自动换行,这只是我现在想到的应用程序,但知道文本的宽度是我想要的)
这是一个完整的“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 的这种方法可能有点不稳定,但我怀疑它是最接近完全跨浏览器的解决方案。
| 归档时间: |
|
| 查看次数: |
1011 次 |
| 最近记录: |