CODEWITHSUNDEEP
htmlcss
jkupczak
jkupczak

Reputation: 3031

Can I stop two words from breaking onto separate lines and creating an orphan?

I have a paragraph that ends with a link that contains the two word phrase "Read More". I'd like these two words to always be displayed on the same line. Right now, if the "More" can't fit on the same line, it gets bumped to the next line by itself.

Is there any CSS that will stop "Read More" from breaking onto separate lines?

Upvotes: 14

Views: 24140

Answers (3)

Vasiliy Faronov
Vasiliy Faronov

Reputation: 12310

You can also place the non-breaking space between the two words:

Read More

although arguably this muddies HTML with presentation matters.

Upvotes: 13

Samich
Samich

Reputation: 30115

<a href='#' class="my-readmore-css-class">Read more</a>

.my-readmore-css-class { white-space:nowrap; } // it should be style for your "Read more"

Upvotes: 6

Anson
Anson

Reputation: 2674

There's a <nobr> tag in HTML that will do this, but it's deprecated. This page suggests using white-space:nowrap instead.

white-space is defined in the CSS1 specification and should be supported by all major browers.

Upvotes: 32

Related Questions