Html / css break line in the middle

Question

I want to print a heading that will span two lines, with the line breaking as close to the middle of the point as possible.
For example, if the title was, say,

"Slow night dream"

I don't want him to crash like

"Mid Midsummer Night"
"Dream"

but more like

"Mid summer"
"Night dream"

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

How to do this using CSS? Please do not ask me what I tried, because I have no ideas .: - (

Adding

Oh, I see from a few comments and answers that my question was incomplete. I don’t want to embed br or anything else, because (a) the text comes from the database, and I don’t want the user to enter tags, and (b) it is a responsive design, so on the desktop the text should fit on two lines but on a cell phone it might take three, and I don't want arbitrary extra line breaks. At the moment, I require hard br coding, because I have no other idea, and I have a media query that displays these br: none for cell phones, because packaging where it wants on small screens gives me the best results.

Answer 1

If I understand correctly, justify is what you are looking for

CSS Property: text-align: justify;

In addition, you can also use text-justify: inter-word;

http://www.w3schools.com/cssref/css3_pr_text-justify.asp

EDIT: Just checked that this property is only supported in IE

Answer 2

use white-space:nowrap

Well, if the content is similar to below

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

Then use the following

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

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

Answer 3

You can use white-space: pre-line; so that the elements act as <pre> , which saves newline characters. Example:

 <style> p { white-space: pre-line; } </style> <p>A Mid-Summer Night Dream</p> 

Demo here