SVG Fit Text to Container

An SVG and CSS snippet to fit text on a container.

by Viktor H. Morales

HTML

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 55">
			<text textLength="290" lengthAdjust="spacing" x="5" y="30" style="
    font-size: 40;
">Main title</text>
			<text textLength="290" lengthAdjust="spacing" x="5" y="50">short description</text>
</svg>
</div>

CSS

/* Change the width value and click on RUN from the top menu to see in action */
.container { 
  width: 500px; 
  border: 1px solid red; 
}