# CSS3 / Responsive Webdesign -> Zeilenumbruch selbst festlegen?



## Lichterflug (31. Mai 2016)

Hallo zusammen,

weiß jemand ob es eine Möglichkeit gibt, mit CSS3 selbst festzulegen an welcher Stelle ein Zeilenumbruch erfolgen soll?
Die Schriftgröße skaliert bereits, jedoch wird der Text ungünstig gebrochen. Ich habe auch schon an ein geschützes Leerzeichen gedacht, aber das wird scheinbar ignoriert.

Desktop: 
Artikelbeschreibung1 Artikelbeschreibung2 Artikelbeschreibung3 Artikelbeschreibung4

Handy: 
Artikelbeschreibung1 Artikelbeschreibung2 <- Zeilenumbruch
Artikelbeschreibung3 Artikelbeschreibung4

Gruß


----------



## -sori- (31. Mai 2016)

Verstehe ich das richtig, dass du eine Zeilenumbruch genau nicht willst und dafür lieber eine kleinere Schrift?
Wenn ja, villeicht in dem du das ganze in eine Tabelle packst?


----------



## DarkMo (1. Juni 2016)

Da ich mir das grad überhaupt nich vorstellen kann, was du meinst...


Lichterflug schrieb:


> Handy:
> Artikelbeschreibung1 Artikelbeschreibung2 <- Zeilenumbruch
> Artikelbeschreibung3 Artikelbeschreibung4


So soll es aussehen, oder so sieht es aus? Wenn es so aussieht, versteh ich die Frage nicht. Wenn es so aussehen soll, fehlt mir zum Verständnis, wie es derzeit aussieht ^^

Ausn Fingern gezogen in etwa so:


Lichterflug schrieb:


> Handy:
> Artikelbeschreibung1 Artikelbeschr <- Zeilenumbruch
> eibung2  Artikelbeschreibung3 Arti<- Zeilenumbruch
> kelbeschreibung4


? Also in der Annahme, dass "Artikelbeschreibung" bspw sowas sein kann "Handy mit Tasse". Dass er dann eben


> Handy mit
> Tasse


umbricht, was nicht gewünscht ist. Dann könnte doch ein ordinärer span helfen, mit nowrap oder? Also so in etwa:
<span mit nowrap>Artikelbeschreibung</span>

Ansonsten versteh ichs völlig falsch ^^


----------



## _maxe (1. Juni 2016)

In CSS3 gibts ja word-break, word-wrap und text-overflow.
Wenn die deine Bedürfnisse nicht befriedigen musst du eben den Text noch kleiner machen. 
Kannst ja mit MediaQueries die Displaygröße abfragen und dann einfach alles runter skalieren.

Ich finde jetzt aber auch nicht, dass dein Handy Beispiel "falsch" aussieht.


----------



## Ap0ll0XT (4. Juni 2016)

So ganz raffe ich das auch nicht. Grundsätzlich werden Texte automatisch umgebrochen, wenn horizontal kein Platz mehr ist. Die CSS-Eigenschaft hyphens für Silbentrennung (automatische Trennung von Wortsilben mit einem Bindestrich) hat leider noch keine ausreichende Verbreitung, um sie zuverlässig einzusetzen. Wenn du aber so etwas suchst, solltest du dir mal die Hyphernator.js ansehen: GitHub - mnater/Hyphenator: Javascript that implements client-side hyphenation of HTML-Documents

Es gibt auch serverseitige Möglichkeiten. Doch von denen rate ich ab. Denn diese liefern das Markup bereits entsprechend an den Browser fertig aus und sorgen für Probleme bei Suchmaschinen. Außerdem soll auch die Barrierefreiheit darunter leiden.


----------

