Question

如何查找不具有span's display:table-cell的文字的宽度和高度。在div旁边display:table。

<div style="display: table; width: 50px; height: 343.559px;"><span class="nodeText" style="display: table-cell;vertical-align: middle;text-overflow: ellipsis;font-family: Arial;font-size: 10px;font-style: normal;font-weight: normal;color: black;opacity: 1;">Desktop 1.43k (53.34%)</span></div>

文字宽度和高度为

宽度约为45px
身高约35px

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

var $e = document.getElementById("e");
var $a = document.getElementById("a");
// Thses are for the span itself...
// Only inner width and padding
console.log($e.clientWidth,$e.clientHeight);
// also scrollbar if presented and ...
console.log($e.offsetWidth,$e.offsetHeight);
// get the width after any computing necessary
console.log( $e.getBoundingClientRect() );
var style = window.getComputedStyle( $e );
console.log( style.font );

// Now combine them to measure string in pixels
var $canvas= document.createElement("canvas");
var ctx = $canvas.getContext("2d");
ctx.font = style.font;
var txt = $e.innerText;
var measures = ctx.measureText(txt);
console.log( ctx.font );
console.log( measures );
$a.style.height = Math.ceil(measures.width / $e.clientWidth) 
                       * parseInt(style.lineHeight) + 'px';

div, #e { position:relative; }
#a { display:block;width:3px;background:red; }

<!-- changed the size to fit in preview -->
<div style="display: table; width: 50px; height: 47px;"><span id="e" class="nodeText" style="display: table-cell;vertical-align: middle;text-overflow: ellipsis;font-family: Arial;font-size: 10px;font-style: normal;font-weight: normal;color: black;opacity: 1;">Desktop 1.43k (53.34%)</span>
<span style="display: table-cell;vertical-align: middle;">
  <span id="a"></span>
</span>
</div>

Answer 2

奇怪没有人推荐 getBoundingClientRect ：

fiddle

var span = document.getElementsByTagName("span")[0],
        rect = span.getBoundingClientRect();
span.parentNode.nextElementSibling.textContent = "width: " + (rect.width|0) 
+ "\nheight: " + (rect.height|0);

PS：我看到你的意思是没有填充的客户区。你的问题并不清楚。使用2个跨度，以便最终得到客户区域。

HERE - width: 40 height: 32

Answer 3

您可以检查div是否有display:table，然后您可以对其进行迭代并找到span display:table-cell属性。

let divs = document.querySelectorAll('div');

divs.forEach(div => {
    if(div.style.display === 'table'){
      let spans = document.querySelectorAll('span');
      spans.forEach(spn => {
        if(spn.style.display === 'table-cell'){
          let theSpan = spn.getBoundingClientRect();
            console.log(theSpan.width, theSpan.height);
        }
      });
    }
})

Answer 4

如果你不希望跨度的高度为div的高度（你想要实际文本占用的空间），你可以额外包装文本：

const span = document.querySelector("span>span");
console.log(
  span.getBoundingClientRect()
)

<div style="display: table; width: 50px; height: 343.559px;">
  <span class="nodeText" style="display: table-cell;vertical-align: middle;text-overflow: ellipsis;font-family: Arial;font-size: 10px;font-style: normal;font-weight: normal;color: black;opacity: 1;">
    <span>Desktop 1.43k (53.34%)</span>
  </span>
</div>

如何使用display table-cell获取文本的宽度和高度而不是span

4 个答案: