计算文本节点宽度

在处理表格时，有时候表格列内容过宽，而需要隐藏部分内容，并且鼠标滑上去显示全部。此时就需要文本宽度的计算。在Element UI里，使用了Range来解决文本的计算。

此外，也可以使用canvas来计算文本节点的宽度。但是在不同的浏览器下，计算的值可能会有非常薛微的差异，但是这点差异对我们的页面效果实现没多大的影响。

On some browsers, this method yields sub-pixel accuracy (result is a floating point number), on others it does not (result is only an int)

使用canvas还需要计算文本的fontSize。使用Range计算算是更合适的方式（兼容性足够）。如果非想使用canvas的话，可以参考stackoverflow的这个回答calculate-text-width-with-javascript 注意需要准确的设置字体大小和字体，否则会不准确

const element = document.createElement('canvas') const context = element.getContext('2d') // 临时写死，最好使用window.getComputedStyle(element, null)来获取。 context.font = '12px PingFangSC-Regular' // 计算当前文本占据的内容宽度 const rangeWidth = context.measureText(this.$slots.default[0].text || '').width

使用Range在Element 下的实现。

const cellChild = event.target.querySelector('.cell'); const range = document.createRange(); range.setStart(cellChild, 0); range.setEnd(cellChild, cellChild.childNodes.length); const rangeWidth = range.getBoundingClientRect().width;

当使用

document.createRange();

创建Range Object，并且定义完Start Point和End Point后，选中区域使用getBoundingClientRect获取 其width。块状元素inner即受width（内联样式）的影响又不受其影响。

当inner width超过了文本实际宽度，range.getBoundingClientRect().width获取的值就是此时行内样式设置的width。当 inner width小于文本实际宽度，range.getBoundingClientRect().width获取的值就是此时文本的实际宽度。 <div class="container"><div class="inner" style="width: 50px;">42342384293842984298423948</div></div> <script> const cellChild = document.querySelector('.container') const range = document.createRange() range.setStart(cellChild, 0) range.setEnd(cellChild, cellChild.childNodes.length) console.log(cellChild.childNodes.length) console.log(cellChild.childNodes) console.log(range) const rangeWidth = range.getBoundingClientRect().width console.log('rangeWidth', rangeWidth) </script> </body> <style> html, body { padding: 0; margin: 0; } .container { /* border: 1px solid black; */ height: 300px; /* width: 50px; */ } .inner { word-break: break-all; } </style>

当inner样式调整为内部CSS，此时的rangeWidth已经完全不受样式的控制。

.inner { word-break: break-all; width: 100px; }

---

参考

Introduction to Range

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。