Support » Themes » Informationstext: Zeilenumbruch fixieren

  • Gelöst Curiosa89

    (@curiosa89)


    Hallo,

    ich habe das Problem, dass ich bei eingefügtem Text in einem Infotext-Modul nicht weiß, ob/wie man automatische Silbentrennung einfügen kann (wahrsch. mit CSS, aber da kenne ich mich nicht aus).

    weiterhin habe ich das Problem, dass die sich Schriftgröße und gleichzeitig Umbrüche verändern, wenn man die Seite per Strg+Scrollen(Maus) oder Strg+Plus größer bzw. kleiner stellt.
    kann man das irgendwie einstellen, dass die Schriftgröße und auch die Zeilenumbrüche fix bleiben?

    Danke schon einmal!

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • ob/wie man automatische Silbentrennung einfügen kann (wahrsch. mit CSS, aber da kenne ich mich nicht aus).

    Ja, das geht mit CSS:
    https://developer.mozilla.org/de/docs/Web/CSS/hyphens

    kann man das irgendwie einstellen, dass die Schriftgröße und auch die Zeilenumbrüche fix bleiben?

    Wieso sollte man das? Das ist kein Bug, sondern ein Feature!

    Gruß, Torsten

    Hallo,

    hättest du mal einen Link zu deiner Seite?

    Einen Zeilenumbruch kannst du mit
    einfügen, solange das Textfeld html lesen kann.

    Damit sollte man jedoch eher inhaltlich Absätze strukturieren und nicht zu sehr den Text gestalten (zum Beispiel als Flattersatz wie im Druck). Denn je nach Endgerät wird der Text anders dargestellt und wenn man breaks drin hat, können komisch aussehende Lücken entstehen.

    Hoffe ich konnte dir weiterhelfen.
    Maja

    Ha! Da bin ich prompt reingefallen: hypens:auto; hinzugefügt und gewundert, warum ich keine Silbentrennung sehe. Leider unterstützt Chrome das immer noch nicht, sodass ich weiterhin Wortungetüme á la
    Donaudampfschifffahrtsgesellschaftsvorsitzender
    im Text-Editor mit dem Charakter Entity ­ versehen werde:
    Donau­­­dampf­­­schiff­­­fahrts­­­gesell­­­schafts­­­vor­­­sitzender.

    Ansonsten hat ja Maja schon darauf hingewiesen, dass man sich gedanklich von einem Satz wie beim Print-Design (Blocksatz, feste Zeilenlänge, vorgegebene Silbentrennunng …) trennen sollte.

    Edi

    (@psychosopher)

    Für Chrome und vernünftige Trennungen überhaupt leistet das Plugin Hyphenator gute Dienste:

    https://de.wordpress.org/plugins/hyphenator/

    Thread-Starter Curiosa89

    (@curiosa89)

    das Problem ist, wenn ich auf einem Mobilgerät (Handy, Tablet) die Webseite betrachte, schafft er es nicht, die Zeilenumbrüche und Abstände richtig anzuzeigen.
    konkretes Beispiel: das Überschrifts-/Titelwort eines Informationstext-Moduls ist sehr lang, und wenn man die Webseite auf einem kleinen Gerät betrachtet, ist das Wort abgehackt (z.B. Großbaustellenleiter wird dann zwischen irgendwelchen Buchstaben getrennt, und nicht intuitiv mit Bindestrichen) – und das sieht merkwürdig aus.. ich hoffe ich kann mich verständlich ausdrücken.
    dasselbe geschieht in anderen Modulen, zb in der Überschrift eines breiten Textfeldes.

    @torsten:
    könntest du mir (wenn du dich mit CSS auskennst) vielleicht kurz ein Bsp. nennen, wie man einen Text mit automatischer Silbentrennung versieht / in CSS eingeben muss?
    ich habe bisher noch nie damit gearbeitet und bin leider was so etwas angeht kein Profi.

    @edi:
    ich habe das Plugin Hyphenator installiert, sehe aber leider keinen Unterschied (benutze Firefox – geht das nur bei Chrome?!)

    könntest du mir (wenn du dich mit CSS auskennst) vielleicht kurz ein Bsp. nennen, wie man einen Text mit automatischer Silbentrennung versieht / in CSS eingeben muss?

    Folge einfach dem Link, den ich oben angegeben habe. Aber Bego hat schon darauf hingewiesen, dass dies leider in Google Chrome noch nicht eingebaut ist.

    Das Plugin bzw. gleichnamige JS-Tool von Edi hilft dann weiter. Das sollte in jedem Browser funktionieren, wenn Javascript aktiv ist.

    Wenn es innerhalb eines Wortes einen Umbruch geben soll (Wort zu breit für Mobilansicht z.B.), ist noch ein wenig mehr CSS nötig.
    https://css-tricks.com/almanac/properties/w/word-break/

    Gruß, Torsten

    Thread-Starter Curiosa89

    (@curiosa89)

    danke, werde ich mal versuchen!

    gibt es denn eine Möglichkeit, einzustellen, dass die Schriftgröße (und auch Bildergröße etc.) auf mobilen Geräten automatisch kleiner angezeigt wird? Dann würde sich das Problem wahrscheinlich auch von selbst lösen. Denn momentan ist es noch so, wenn ich die Webseite mobil betrachte, ist die Schriftgröße genauso groß wie auf der PC-Ansicht, sodass es alles sehr groß gezogen wirkt.

    Edi

    (@psychosopher)

    Das Plugin funktioniert mit allen gängigen Browsern. Das Trennverhalten muss aber selbstverständlich konfiguriert werden. Beispielsweise ob in Titeln getrennt werden soll oder nicht (Standardeinstellung).

    Ob beziehungsweise wie ein Theme auf mobilen Geräten funktioniert, hängt beispielsweise von den CSS-Vorgaben des Themes ab. Es gibt dafür verschiedene Ansätze (und damit verbundene Philosophien) wie etwa „responsives Webdesign“ oder „adaptives Webdesign“. Automatisch geht da gar nichts. Im Gegenteil: Die Anpassungen für die wachsende Zahl an mobilen Geräten können äusserst aufwendig werden.

    Am einfachsten ist es, ein bewährtes Theme zu verwenden, dass den eigenen Bedürfnissen weitgehend entspricht.

    Ohne zu wissen, welches Theme Du derzeit wofür verwendest, bleibt die Diskussion hier theoretisch. Vielleicht magst Du den Link zur Website angeben.

    gibt es denn eine Möglichkeit, einzustellen, dass die Schriftgröße (und auch Bildergröße etc.) auf mobilen Geräten automatisch kleiner angezeigt wird?

    Ja, gibt es. Dafür brauchst du nicht einmal ein Child Theme anlegen.
    Viele Themes bieten als Theme-Option ein Feld für eigene CSS-Regeln. Anderenfalls kannst du dir mit dem Plugin Simple Custom CSS behelfen. Dort kannst du dann eine Media Query einfügen, etwa in der Richtung

    @media (max-width: 600px) {
    font-size: 10px;
    }

    Dabei wäre es natürlich sinnvoll, die Breite analog anderer Media Queries zu wählen. Sprich: wenn schon eine Media Query für eine Breite 500px vorhanden ist, nicht zusätzliche eine neue Größe 600px hinzufügen.

    Aber wie Edi schon ganz richtig gesagt hat: Gib mal eine URL zu deiner Website, dann ist das weniger theoretisch.

    @bego: Du meinst sicher eher so etwas, oder?

    @media (max-width: 600px) {
      .entry-title {
        font-size: 10px;
      }
    }

    Dein Code ist so ja so nicht lauffähig. Du benötigst ja den Selektor (hier beispielhaft die Klasse „entry-title“). Ich nehme an, dass du nur das Prinzip verdeutlichen wolltest – nicht das sich das jemand kopiert und wundert … 😉

    Gruß, Torsten

    Ups, natürlich. Da war ich wohl etwas unkonzentiert. Sorry.

    Alles fein. Bin da nur drüber gestolpert …

    Gruß, Torsten

    Thread-Starter Curiosa89

    (@curiosa89)

    Hallo alle,
    danke vielmals für eure Hilfe, habe es nun hinbekommen bzw. bin zufrieden.
    die Webseite darf noch nicht veröffentlicht werden, sonst hätte ich euch bereits zeigen können worum es geht, aber bald ist es soweit.
    vielen Dank!
    Liebe Grüße

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Das Thema „Informationstext: Zeilenumbruch fixieren“ ist für neue Antworten geschlossen.