如何获得跨度中文本的高度和宽度而不是整个跨度的宽度和高度

Question

I am HTML like below can I get the height and width of text only not the whole span .

 var bounds = d3.select(".nodeText").node().getBoundingClientRect(); console.log(bounds.width); // 300 console.log(bounds.height); // 111 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.1.3/d3.min.js"></script> <div style="display: table; width: 300px; height: 111.717px;"> <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;">Exact 765 (55.23%)</span> </div> 

Answer 1

You can use createRange function.

 var span = d3.select(".nodeText").node(); var textNode = span.childNodes[0]; var range = document.createRange(); range.selectNodeContents(textNode); var rect = range.getBoundingClientRect(); var height = rect.bottom - rect.top; var width = rect.right - rect.left; console.log("height = "+height,"width = "+width); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.1.3/d3.min.js"></script> <div style="display: table; width: 50px; height: 111.717px;"><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;">Exact 765 (55.23%)</span></div>