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

html css responsive-design line-breaks
Forethinker picture Forethinker · Aug 14, 2013 · Viewed 72.2k times · Source

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?

Answer

jomo picture jomo · Jun 23, 2014

I think this works very well:

span.line {
  display: inline-block;
}



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

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

screenshot

open demo

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More