Erzwingen dass Wörter nicht getrennt dargestellt werden

wildner2010
(@wildner2010)

vor 1 Jahr, 2 Monaten

Hallo,

gibt es eine Möglichkeit, zu verhindern, dass (lange) Wörter automatisch und teilweise unschön getrennt dargestellt werden?

Vor allem bei Smartphones kommt es (bei mir) vor, dass z.B. bei längeren Wörtern der letzte Buchstabe in die nächste Zeile rückt.

Beste Grüße
Wildner

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 2 Monaten
Da du keine URL zur Webseite angegeben hast, kann ich nur pauschal antworten: Mit der CSS-Regel p { hyphens: none; }kannst du festlegen, dass der Browser nicht selbständig eine Silbentrennung vornehmen soll. Möchtest du das z.B. auf alle Absätze eines Blog-Beitrags anwenden, kannst du im Customizer unter Zusätzliches CSS .entry-title p { hyphens: none; } angeben.

Möchtest du selber eine Silbentrennung vorgeben, kannst du das HTML-Character-Entity  (für soft hyphenate) verwenden. Die
Kraftfahrzeughaftpflichtversicherung bricht dann je nach Zeilenlänge nach „Kraft“, „fahrzeug“ oder „haftpflicht“ um, aber nicht zwischen „fahr“ und „zeug“ oder „haft“ und „pflicht“. Die Eingabe muss in der Ansicht des Code-Editor erfolgen, weil beim visuellen Editor  in &shy; umgewandelt wird (und folglich vom Browser als  ausgegeben wird, statt es als weiche Silbentrennung zu interpretieren). Eine zusätzliche CSS-Regel ist dann nicht nötig.

Das Wort „Kraftfahrzeughaftplichtversicherung“ wird nach „Kraft“ umgebrochen, obwohl die nächste Silbe „fahr“ sicher noch in die Zeile gepasst hätte. Öffnet man das Browserfenster weiter, wird nach „fahrzeug“ umgebrochen, dazwischen nicht.
- Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Bego Mario Garde. Grund: Screenshot mit Beispiel
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 2 Monaten
Hallo @wildner2010
oder meinst du etwa, dass Wörter „auseinandergerissen“ werden, so dass beispielsweise das Wort „Kanarienvogelkäfig“ an irgendeiner Stelle getrennt wird, sinngemäß so etwa:
```
Kanarienvogelk
äfig
```
In dem Fall hilft eine Media Query (CSS). An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

Hättest du uns die entsprechenden Infos (URL, Bericht) gepostet, die wir immer wieder gebetsmühlenartig einfordern, hätten wir dir vielleicht schnell helfen können. Pech 🤷‍♂️

Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Hans-Gerd Gerhards.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 2 Monaten

@hage Wie du völlig richtig angemerkt hast, sind Fragen zu CSS hier off topic. Aber da du den Begriff genannt hast: Die willkürliche Silbentrennung hat eigentlich nichts mit Media Queries zu tun, sondern der CSS-Eigenschaft word-break. (vgl. MDN: word-break)

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 2 Monaten

@pixolin

Die willkürliche Silbentrennung hat eigentlich nichts mit Media Queries zu tun

Da hast du vollkommen recht. Aufgrund der unklaren Problembeschreibung („dass z.B. bei längeren Wörtern der letzte Buchstabe in die nächste Zeile rückt.“) könnte ich mir aber auch vorstellen, dass @wildner2010 möglicherweise auch das Problem mit der Verschiebung von Zeichen meinen könnte. Daher auch meine Anmerkung.
Letztendlich kann das aber nur @wildner2010 aufklären. 🤷‍♂️

Thread-Starter wildner2010
(@wildner2010)

vor 1 Jahr, 2 Monaten

Hallo zusammen,
vielen Dank für die ganzen Rückmeldungen und Infos.
Sehr gerne hätte ich die direkte URL angegeben. Da ich die Seite aber noch bearbeite ist diese noch nicht öffentlich verfügbar.

Ich habe daher einen Screenshot eingefügt, um meine Problematik besser darzustellen.

Dazu noch ein weiteres Anliegen: Ich habe die Schriftart „Inter_Tight“ (Google-Font) über den Font Manager serverseitig hinzugefügt um der Gefahr von Abmahnungen aus dem Weg zu gehen.

Nun musste ich feststellen, dass auf mobilen Geräten (iPhone und iPad) die Schrift irgendwie „verwaschen“ angezeigt wird.

Hat für dieses Phänomen jemand eine Erklärung?
Ich habe dazu sicherheitshalber einen weiteren Screenshot angefügt und hoffe sehr, dass man damit die „unsaubere“ Darstellung der Buchstaben erkennen kann.

Besten Dank!!!
Wildner
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 2 Monaten
Hallo,
ohne URL können wir dir hier nur eher allgemeine Vorschläge unterbreiten.
Bezogen auf das erste Problem: Hier kann man das Problem z. B. über Media Queries über die Eigenschaft font-size in den Griff bekommen.

Noch einfacher kann man das seit noch nicht so langer Zeit mit der CSS-Funktion clamp() über die Eigenschaft font-size erreichen.

In dem Zusammenhang ist übrigens die folgende (englischsprachige) Website eine große Hilfe.

Die entsprechenden CSS-Regeln packst du dann unter Design > Customizer > Individuelles CSS oder in die style.css, wenn du ein Child Theme verwendest.

An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

Bezogen auf das zweite Problem können wir dir evtl. helfen, wenn du schreibst, welches Theme du verwendest. Dazu möchte ich allerdings auf die FAQ verweisen:
Eine Frage = Ein Thread (Thema).

Dazu solltest du also ein neues Thema erstellen.

Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Hans-Gerd Gerhards. Grund: Ergänzung