包装内联元素的总宽度

Question

I want to find the total width of a SPAN which wraps around several lines. 我想找到一个环绕几行的SPAN的总宽度。 Is that possible? 那可能吗？ It's a single SPAN tag, with no other internal nodes... 这是一个SPAN标记，没有其他内部节点...

If that's not possible, I would atleast like to find the left and right pixel offsets of the start and end of the SPAN. 如果无法做到这一点，我至少希望找到SPAN起点和终点的左右像素偏移。

Answer 1

You need to call getClientRects . 您需要调用getClientRects 。 You'll get an array of line rectangles and can add the width. 您将获得线矩形数组，并可以增加宽度。

QuirksMode has a nice demo . QuirksMode有一个不错的演示。

Answer 2

HI, I think you can achieve this by using getBoundingClientRect function. 嗨，我想您可以通过使用getBoundingClientRect函数来实现。

var leftPosition = yourElement.getBoundingClientRect().left;
var rightPosition = yourElement.getBoundingClientRect().right;
var topPosition = yourElement.getBoundingClientRect().top;
var bottomPosition = yourElement.getBoundingClientRect().bottom;

I am not sure whether you are looking for this or not. 我不确定您是否正在寻找这个。

Answer 3

you want to find the pixel width of a block of text if it was all one line? 您是否要查找一块文本的像素宽度（如果全都是一行）？

I think what you might be able to do (and someone will downvote this for being wrong) is to use javascript to set up another span in another div off the page (eg style="top:-500px;"), take the 's innerHTML, drop it to the hidden span, take the width of the containing div, and then run with that. 我认为您可能能够执行的操作（有人会因为错误而将其否决）是使用javascript在页面的另一个div中设置另一个跨度（例如style =“ top：-500px;”），将“的innerHTML，将其放到隐藏的范围内，采用包含div的宽度，然后运行该宽度。

I predict cross browser issues and heartache 我预计跨浏览器问题和心痛

<html>
<head>
<script>
function getSpanWidth(spanID){
    sourceSpan=document.getElementById(spanID)
    targetSpan=document.getElementById("spanmeasure")
    targetSpan.innerHTML=sourceSpan.innerHTML
    alert(targetSpan.offsetWidth+" "+sourceSpan.offsetWidth)
}
</script>
<style>
div{border:1px solid #cc0000;}
</style>
</head>

<body onLoad="getSpanWidth('spantext')">

<div style="width:100000px; top:-1000px;position:absolute;"><span id="spanmeasure"></span></div>
<div style="width:200px;">
<span id="spantext"> span text goes here, and then if there is lots and lots it will wrap around and be awesome! I'll put in more text to awesome it out even more... Awesome!
</span>
</div>
</body>
</html>

this seems to work on ie7 and ff. 这似乎适用于ie7和ff。 You will get variation if you don't use a reset style (because the default fonts are different) 如果您不使用重设样式，则会产生变化（因为默认字体不同）

also, if you set display:none, then the width will be 0. 另外，如果您设置display：none，则宽度将为0。

Answer 4

var element = document.getElementById('someSpan');    
var elementWidth = element.offsetWidth;

No idea if that's what you're really asking, but that'll give you the width of the span. 不知道这是否是您真正要问的问题，但这将为您提供跨度的宽度。

Edit: After reading your question 3 more times I'm pretty sure this isn't what you're asking. 编辑：在阅读了3次您的问题后，我很确定这不是您要问的问题。

包装内联元素的总宽度

问题描述

4 个解决方案

解决方案1
1 2009-06-15 05:18:19

解决方案2
1 2009-06-15 10:17:53

解决方案3
0 2009-06-15 04:29:14

解决方案4
0 2009-06-15 05:31:35

包装内联元素的总宽度

问题描述

4 个解决方案

解决方案1 1 2009-06-15 05:18:19

解决方案2 1 2009-06-15 10:17:53

解决方案3 0 2009-06-15 04:29:14

解决方案4 0 2009-06-15 05:31:35

解决方案1
1 2009-06-15 05:18:19

解决方案2
1 2009-06-15 10:17:53

解决方案3
0 2009-06-15 04:29:14

解决方案4
0 2009-06-15 05:31:35