<svg class="full-title">
	<text>
		Each line
	</text>
</svg>
<svg class="full-title">
	<text>
		will expand to be
	</text>
</svg>
<svg class="full-title">
	<text>
		100% wide.
	</text>
</svg>
<svg class="full-title">
	<text>
		It's some sort of crazy magic.
	</text>
</svg>
// Note: Here on Codepen, if you change the font-family, it doesn't trigger a recalc. You have to also change the html to see the new layout.

body {
	color: #222;
}

.full-title {
  display: block;
 	fill: currentColor;
}
View Compiled
const svgTitles = document.querySelectorAll(".full-title");
Array.prototype.forEach.call(svgTitles, el => {
	const bbox = el.getElementsByTagName("text")[0].getBBox()
	const bboxArray = [
		bbox.x,
		bbox.y,
		bbox.width,
		bbox.height
	].join(' ');
	el.setAttribute('viewBox', bboxArray);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js