CSS Silbentrennung mit CSS

E

Emskerla

Gast

• 23. Oktober 2016

• #1

Liebe Gemeinschaft,

sehe ich es richtig, dass mit der derzeitigen Silbentrennung

Code:

 overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

zwar nach Silben getrennt wird, aber nicht

Code:

Tier-
garten

sonder im Zweifelsfall

Code:

Tiergar-
ten

und es keine Möglichkeit gibt, insbesondere im Responsive-Design, diesen unschönen Trennungen Herr zu werden?

Vielen Dank im Voraus

 

FranzvonAssisi

Admiral

Registriert

Dez. 2013

Beiträge

7.403

• 23. Oktober 2016

• #2

Ja, wenn dus so eingestellt hast. Es wird an der letzen Trennstelle gebrochen, bevor es über den Rand geht. Du kannst natürlich bei fixen Texten einfach manuell

Code:

Tier-<br>
garten

schreiben...

 

E

Emskerla

Gast

• 23. Oktober 2016

• #3

FranzvonAssisi schrieb:

Code:

Tier-<br>
garten

Zum Vergrößern anklicken....

Geht nicht, da ich dann auch am "großen Bildschirm" eine Trennung habe (Responsive-Design).

Gibt es eine Möglichkeit, bei welcher nur dann getrennt wird, wenn eine Wort auch dann nicht hin passt, wenn es in einer neue Zeile verschoben wird? Einfach ausgedrückt:

Wenn Trennung, dann verschiebe in neue Zeile
Wenn das auch nicht geht, trenne (ansonsten nicht).

 

kachiri

Fleet Admiral

Registriert

Apr. 2011

Beiträge

15.525

• 23. Oktober 2016

• #4

Lass mich raten, du setzt den Text auch auf Blocksatz, oder? Würde ich von abraten. Es sieht vielleicht "runder" aus, weil jede Zeile gleich breit ist. Hat aber unschöne Nebeneffekte (Silbentrennung, oder noch unschöner, sehr viel Freiraum zwischen einzelnen Worten). Spar dir also sowohl Blocksatz, als auch die Silbentrennung. Sie stören beide den Lesefluss.

Und wenn der Text auf kleineren Bildschirmen halt anders umbricht, als am großen Bildschirm, dann ist das halt so. Ist ja vollkommen normal, dass ein Absatz auf dem Handy-Display halt über 10 Zeilen geht, wenn er am PC über 3 Zeilen geht.

Ansonsten gibt es keine andere Möglichkeit. Entweder über deinen CSS-Code, oder eben mit shy letzterer ist halt ähnlich wie <br>.

Deswegen einfach grundsätzlich:

Ein Web-Designer kann nie wissen, wie ein Besucher seine Webseite erlebt. Er weiss nicht, wie groß dessen Bildschirm ist, wie die Auflösung des Monitors ist, ob das Browserfenster auf Vollbild aufgezogen wird oder nicht, welche Schriftarten installiert sind und ob die Ansicht eventuell vergrößert oder verkleinert wurde. Er kann deshalb überhaupt nicht festlegen, an welchen Stellen sein Text umgebrochen wird. Er sollte aber alles tun, damit der Text lesbar bleibt.

Zum Vergrößern anklicken....

 

Zuletzt bearbeitet: 23. Oktober 2016

E

Emskerla

Gast

• 23. Oktober 2016

• #5

Nein, ich verwende keinen Blocksatz.

Wenn ich den obigen CSS-Code entferne, passiert folgendes: Lange Wörter werden am Ende der Zeile umgebrochen, einen Bindestrich gibt es jedoch nicht. Dieses Verhalten liegt an

Code:

 overflow-wrap: break-word;

Anyway.

Was ich realisieren will, ist, wie gesagt, ist das Verhalten aus meinem letzten Posting.

 

S

Seby007

Commander

Registriert

Nov. 2003

Beiträge

2.640

• 23. Oktober 2016

• #6

Ich könnte mir vorstellen, dass es über eine Javascript-Routine klappen könnte...

 

K

killray

Lt. Commander

Registriert

Jan. 2009

Beiträge

1.066

• 23. Oktober 2016

• #7

Was du dir vorstellst geht höchstens mit javascript, aber nicht mit css.

 

E

Emskerla

Gast

• 23. Oktober 2016

• #8

Habe ich bereits befürchtet ... JavaScript kommt nicht in Frage, hier kann zu, vielen Dank an alle!

 

kachiri

Fleet Admiral

Registriert

Apr. 2011

Beiträge

15.525

• 23. Oktober 2016

• #9

Und JavaScript ist dann halt wieder ein kritischer Punkt.

 

R4sh

Commander

Registriert

Okt. 2014

Beiträge

2.781

• 23. Oktober 2016

• #10

man kann sich auch verrückt machen. Javascript sind meist nur paar Zeilen aus dem Web einfach einfügen und fertig. So schwer...

 

E

Emskerla

Gast

• 24. September 2018

• #11

Zwei Jahre später – immer noch das gleiche Problem.

Ich habe überhaupt keine Bindestriche in Edge Mobile und Chrome (Android). Der aktuelle Klassiker: Datenschutzerklärung. Und: Hyperlinks werden nicht umgebrochen, sondern laufen einfach rechts aus dem Smartphone Bildschirm raus.

Gibt es dafür keine Lösung?

Literatur:
https://github.com/readium/readium-css/issues/31
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
https://gist.github.com/justmarkup/891ae55c4f8667c75e0e

 

Photon

Commodore

Registriert

Apr. 2006

Beiträge

5.036

• 16. Juli 2019

• #12

Der Thread ist zwar schon etwas älter, jetzt habe ich aber ein ähnliches Problem, nur dass in meinem Fall nicht mal zwischen zwei Silben getrennt wird und auch kein Trennstrich zu sehen ist: https://jsfiddle.net/yxpa26r7/ Ohne word-wrap oder overflow-wrap wird übrigens überhaupt nicht umgebrochen und der Text läuft aus der div heraus. Hat jemand einen Tipp, was man da machen kann?

 

R

r0b0t

Ensign

Registriert

Juni 2010

Beiträge

249

• 16. Juli 2019

• #13

Wenn der Text statisch ist, kannst du mit einem Softhyphen - weiches Trennsymbol &shy; - Sollbruchstellen zur Worttrennung angeben. Zum Beispiel so: Energieverbrauchs&shy;kennzeichnungs&shy;verordnung
Ein moderner Browser sollte das dann automatisch umbrechen. Funktioniert hier mit der Forensoftware aber nicht.

 

Photon

Commodore

Registriert

Apr. 2006

Beiträge

5.036

• 16. Juli 2019

• #14

Hab ich vergessen zu erwähnen, der Text ist leider nicht statisch. Und noch eine Beobachtung: Für manche Wörter funktioniert die Silbentrennung, zum Beispiel "übernehmen" statt "Autobahn". Aber ich kann mir nicht vorstellen, dass "Autobahn" nicht im Wörterbuch ist... Gefühlt funktioniert die Silbentrennung aber eher sehr selten.

 

R

r0b0t

Ensign

Registriert

Juni 2010

Beiträge

249

• 16. Juli 2019

• #15

Wenn ich deinem Link folge steht bei mir im Firefox:
Auto-
bahn
Erst wenn ich bei width mehr als 65 px angebe, wird nicht mehr getrennt. Das hängt sicher von der bei den Browsereinstellungen gesetzte Schriftart und -größe ab.

 

Photon

Commodore

Registriert

Apr. 2006

Beiträge

5.036

• 16. Juli 2019

• #16

Ok, das ist interessant! Ich denke, es hängt eher vom verwendeten Wörterbuch ab. Wie gesagt, wenn ich word-wrap und overflow-wrap herausnehme, dann läuft der Text aus der div raus, sie ist also definitiv klein genug, damit der Zeilenumbruch anspringen müsste.

Ich nutze auch den Firefox, allerdings unter Linux. Die Rechtschreibprüfung funktioniert auch wunderbar, aber vielleicht braucht es spezielle Wörterbücher für Silbentrennung, die bei meiner Installation fehlen...

edit: Funktioniert sogar unter Debian: http://browsershots.org/screenshots/750c3ded659275cb6200d489190c569d Aber hier unter Manjaro irgendwie nicht...

edit2: @r0b0t Welche Firefox-Version nutzt du denn? Ich habe gerade Firefox 67 hier unter Manjaro getestet und dort taucht das Problem nicht auf, unter Firefox 68 und Chromium 75 hingegen schon.

 

Zuletzt bearbeitet: 16. Juli 2019

R

r0b0t

Ensign

Registriert

Juni 2010

Beiträge

249

• 16. Juli 2019

• #17

Firefox 60.8.0esr (32-Bit) unter Windows 7.
Beim IE 11 wird auch korrekt getrennt.
In einer VM mit Virtualbox und Xubuntu 18.04 mit Firefox 68.0 (32-Bit) steht allerdings:
Autob
ahn
ohne Trennungsstrich.

 

Photon

Commodore

Registriert

Apr. 2006

Beiträge

5.036

• 16. Juli 2019

• #18

Ok, das deckt sich mit meinen Beobachtungen: Firefox ESR 60.8, Firefox 61, 66 und 67 klappen gut, das aktuelle Firefox 68 und Chromium 75 nicht. Scheint eine Regression zu sein...

edit: Habe einen Bugreport reingestellt: https://bugzilla.mozilla.org/show_bug.cgi?id=1566542

edit2: Wie man im Bugreport sehen kann, ist der Bug bekannt und betrifft nur großgeschriebene Wörter im Deutschen. In FF 69 wird er auch gefixt, somit ist das Problem für mich erledigt. Danke fürs Testen!

 

Zuletzt bearbeitet: 17. Juli 2019