CODEWITHSUNDEEP
htmlcss
Chandler Swift
Chandler Swift

Reputation: 175

Force wrap between specific words

I'm building a site on which I have a title that consists of a long first word and two shorter words.

<h1>Looooooong short short.</h1>

I want this title to fit on one line if the screen is widde enough, and if the screen or container becomes too narrow for all three words, to break between the first and second, not the second and third words.

i.e. I want this:

Looooooong
short short

rather than this

Looooooong short
short

How can I do this in HTML/CSS?

Also on JSBin if you prefer: jsbin.com/puzemex

Upvotes: 2

Views: 177

Answers (1)

tibo
tibo

Reputation: 5494

You might want to use a non breakable space:

short&nbsp;short

For longer text here is a nice article:

http://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/

Upvotes: 1

Related Questions