CSS3 / Responsive Webdesign -> Zeilenumbruch selbst festlegen?

[Lichterflug]

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-]

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]

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

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:

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]

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]

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.