SOURCE

var range = document.createRange()
var boxEl = document.querySelector('.box')
range.setStart(boxEl, 0)
range.setEnd(boxEl, boxEl.childNodes.length)

var rect = range.getBoundingClientRect()

console.log(boxEl.childNodes, '---', rect.width, rect.height)

<div class="box">
  空内容1
  <span>标签1</span>
  <span>标签2</span>
  <span>标签3</span>
  <span>标签4</span>
  <span>标签5</span>
  <span>标签6</span>
  <span>标签7</span>
  空内容2
</div>

.box {
  height: 30px;
  overflow: hidden;
}

span {
  display: inline-block;
  padding: 5px 10px;
  background: red;
  margin: 0 5px;
}