Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html/css break line at midpoint

Tags:

html

css

I want to print a title that will span two lines, with the line broken as near the mid-point as possible.
For example, if the title was, say,

"A Mid-Summer Night's Dream"


I don't want it to break as

"A Mid-Summer Night's"
"Dream"


but more like

"A Mid-Summer"
"Night's Dream"

If the title is long enough to require three lines, I want the lengths of all three to be as close to the same as possible. Etc.

Any way to do this with CSS? Please don't ask me what I've tried so far because I've got no ideas at all. :-(

Addendum

Oh, I see from several comments and answers that my question was incomplete. I don't want to embed a br or whatever because, (a) the text is coming from a database, and I don't want to require the user to enter tags, and (b) this is a responsive design, so on a desktop the text should fit on two lines but on a cell phone it might require three, and I don't want arbitrary additional line breaks. For the moment I am requiring hard-coded br's because I don't have another idea, and I have a media query that sets these br's to display:none for cell phones because wrapping wherever it wants on small screens is giving me better results.

like image 278
Jay Avatar asked Aug 27 '15 05:08

Jay


1 Answers

use white-space:nowrap

Ok if the content is something look like the below

<div>A Mid-Summer Night's Dream</div>

Then use the following

<div>A Mid-Summer <span style="white-space:nowrap;">Night's Dream</span></div>

put the contents inside the span which you don't want to break. Let me know if it is worked

like image 56
Rajesh kannan Avatar answered Oct 21 '22 00:10

Rajesh kannan