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

Question

How to find width and height of a text not the span's having display:table-cell . In side of a div with 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> 

Text width and height is

width is approx 45px
height is approx 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

Strange nobody recommended getBoundingClientRect :

fiddle

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

PS: I see that you meant the client area without the padding. And that was not clear in your question. Use 2 spans so that you end up with client areas.

HERE - width: 40 height: 32

Answer 3

You can have a check for the div if it has a display:table then you can iterate through it and find the span with display:table-cell property.

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

If you don't want the height of the span to be the height of the div (you want the space that the actual text takes up) you can extra wrap the text:

 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>