linia przerywania html/css w punkcie środkowym

Question

Chcę wydrukować tytuł, który będzie obejmował dwie linie, z linią zerwaną tak blisko punktu środkowego, jak to możliwe.
Na przykład, jeśli tytuł był, powiedzmy,

"Sen Mid-letnia noc w"

Nie chcę go złamać jak

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

ale bardziej jak

„mid-letni”
„Sen nocy”

Jeśli tytuł jest wystarczająco długi, aby wymagać trzy linie, chcę długość wszystkich trzy, aby być tak blisko, jak to możliwe. Itd.

Jakikolwiek sposób to zrobić z CSS? Proszę, nie pytaj mnie, co do tej pory próbowałem, bo nie mam żadnych pomysłów. :-(

Uzupełnienie

Och, widzę od kilku komentarzach i odpowiedziach, że moje pytanie było niekompletne. Nie chcę aby osadzić Br lub cokolwiek, ponieważ (a) tekst pochodzi z bazy danych i nie chcę wymagać od użytkownika wprowadzania znaczników oraz (b) jest to responsywny projekt, więc na pulpicie tekst powinien pasować do dwóch linii, ale na telefonie komórkowym może wymagać trzech, a ja nie chcę żadnych arbitralnych dodatkowych linii podziału, na razie wymagam mocno zakodowanych br, ponieważ nie mam innego pomysłu, i mam zapytanie o media, które ustawia te br do wyświetlenia: brak dla telefonów komórkowych, ponieważ zawijanie tam, gdzie chce na małych ekranach daje lepsze wyniki.

Answer 1

Jeśli rozumiem go poprawnie, uzasadnić jest to, czego szukasz

własności CSS: text-align: justify;

Dodatkowo, można również użyć text-justify: inter-word;

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

EDIT : Po prostu sprawdziła, czy ta właściwość jest obsługiwana tylko w IE

Answer 2

użycie white-space:nowrap

Ok, jeśli treść jest coś wyglądać poniżej

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

Następnie użyj następujących

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

umieścić zawartość wewnątrz przęsła, które Cię nie chcę się zepsuć. Daj mi znać, jeśli to zadziała

Answer 3

Możesz użyć white-space: pre-line;, aby elementy zachowywały się jak <pre>, co pozwala zachować nowe linie. Przykład:

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

Demo here