Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I keep paragraphs together in HTML columns?

Tags:

html

css

So, I have a page that looks like...

I am a monkey
I am a monkey too, with
additional information.
I am also a monkey

If I wrap this in CSS using the -webkit-columns:2 tag, it displays as...

I am a monkey               additional information
I am a monkey too, with     I am also a monkey

I'd like it to avoid splitting the paragraphs in this case.

I'm looking for something like "nobr" or a word-wrap feature or something... eeek. Any ideas?

(Later...) seems I can do this in Firefox, but not Chrome. Hmm...

like image 564
jamescridland Avatar asked May 28 '11 23:05

jamescridland


People also ask

How do I keep lines together in HTML?

How to Prevent Word Wrap on a Web Page: HTML Method. If you only have the one-off instance of two or more words that you want to force the browser to keep on a single line, the easiest way is to use the non-breaking space character, "   ", to separate those words instead of a normal space.

How do you maintain paragraphs in HTML?

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

How do you organize columns in HTML?

An HTML column is defined in the <div> tag using the class = "column" keyword. More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added.


1 Answers

You can set

p {
  display:inline-block;
}

which will prevent that paragraphs from breaking over a column break. May have some other strange effects though so have a good play with it first.

like image 102
Adam Avatar answered Oct 10 '22 12:10

Adam