Avoid word break while using vw for font size

Question

Does there exist a mathematical relation between the font-size and the screen width so that there is no word break during resize of the width of the viewport/window?

For example, if I set the font size of a paragraph to 16px, where the first line of the paragraph reads-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

If I were to resize the width of my viewport, there would be a word break in case if the viewport width is small to accommodate the sentence because the font-size is set in pxunits.

Now since the font-size increases/decreases during resize of width of viewport if the unit is set in vw, I want to make sure there is no word break, imagine you're resizing an image with text on it. Is this possible to achieve?

Someone can override your font-size settings, and many browsers have a default minimum font-size value, so chances are your actual problem isn't going to be solved in this manner. — andi
you'd have to include your exact text in that "mathematical relationship" too. So you'd have to go about measuring the length of that text at various font sizes in order to determine the proportion. If you're using a fixed-width font, there might be more of a direct correlation, but it still depends on how many characters are in your text. — andi
Could this be solved with using an SVG? text element in svg image? — Persijn

Mike 'Pomax' Kamermans Mike 'Pomax' Kamermans · Accepted Answer · 2016-11-14T17:59:15

You can set your container to a specific vw width, and then set your font-size to a specific vw value. With those two things, resizes should work as you expect, provided the font is loaded explicitly, rather than relying on "whatever font the browser decides to use", so no CSS serif, but also no CSS "Times New Roman" because you don't know which version of that font will end up actually getting used, and so you cannot trust that the font metrics are what you need them to be. So:

load a specific font through an @font-face rule
make sure your container is set to have a width expressed in vw
make sure your container specifies its font-size in vw units.

CSS:

.rs {
  width: 50vw;
  background: lightgreen;
  font-family: lato;
  font-size: 3.3vw;
}

HTML:

....
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs">
  This is text This is text This is text T
</div>

Live example: http://jsbin.com/januxevebe/edit?html,css,output

Avoid word break while using vw for font size

1 Answers