To achieve text scaling without wrapping, consider utilizing SVG (compatible with IE9+):
<div class="element" style="width: 30%">
<svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<text x="50" y="50" text-anchor="middle">Test</text>
</svg>
</div>
<div class="element" style="width: 60%">
<svg class="scaled" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<text x="50" y="50" text-anchor="middle">Test</text>
</svg>
</div>
Apply the following CSS rules:
.element {
position: relative;
display: inline-block;
border: 1px solid red;
}
.scaled {
width: 100%;
}
For troubleshooting potential vertical scaling issues in Safari and Internet Explorer versions, implement this specific snippet for Safari compatibility:
svg {
// hack to make safari use the correct height of svg
// https://bugs.webkit.org/show_bug.cgi?id=82489
max-height: 100%;
}
In case of Internet Explorer, utilize this SASS mixin ensuring you know the aspect ratio of your SVG beforehand:
@mixin aspect-ratio($ratio) {
.ie & {
padding-bottom: 100% * $ratio - 0.02;
height: 1px;
overflow: visible;
box-sizing: content-box;
}
}
(You can either convert this mixin to another preprocessor or input a fixed $ratio value directly within a standard CSS class.)