Forethinker Forethinker - 9 months ago 45
CSS Question

Specifying a preferred line break point in HTML text in a responsive design

I was wondering if there is a CSS or javascript magic that could place a marker in an html text so that the browser know where the line break creation is preffered when the text gets cramped. Is there such thing?


I think this works very well:

span.line {
  display: inline-block;

  <span class="line">This text should break</span>
  <span class="line">after the word "break"</span>

The text still breaks on other places when there is not enough space:


open demo