Text Block Width

by Slava Fomin II

HTML

<div id="container">
  <span id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
  </span>
</div>

CSS

body {
  width: 330px;
  margin: 20px;
  border: 1px dashed deeppink;
}

#container {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: lime;
}

#container:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 10px;
  height: 10px;
  background-color: red;
}

#text {
  border: 1px dashed blue;
}

JavaScript

const textNode = document.getElementById('text');
const container = document.getElementById('container');

container.style.width = textNode.offsetWidth + 'px';