|
|||
Zeilenumbruch durch Anpassung Schriftgröße verhindern
Ich habe auf meiner Website im Header die Überschrift mit 36 px definiert
In der Breite des Überschriftsblock belegt dit Überschrift ca 66% Wird das Fenster schmäler verringert sich der Leerbereich Ist der Leerbereich aufgebraucht findet ein Zeilenumbruch statt. So weit so gut... Den Zeilenumbruch möchte ich durch stufenloses verkleinern der Schriftgröße verhindern. Gleichzeitig muss es eine Mindestschriftgröße geben. Ist diese erreicht soll ein Zeilenumbruch stattfinden. Bastel jetzt schon seit Stundennn Hat jemand nen Tipp für mich? |
Sponsored Links |
|
|||
Eine spezielle Lösung kann ich nicht bieten, aber zumindest einen Denkanstoß:
Erstens (und das nur als allgemeine Diskussion): Wozu diese spezifische Anforderung? Web ist nicht print und so genau wird eigentlich nirgends Text im Web gesteuert. Einfach auch deshalb weil ja alles dynamisch ist. Zweitens (ist hoffentlich hilfreicher): Verwende variable Größen für deine Schrift. Also keine px, sondern eventuell etwas in Kombination mit CSS calc() und zb vw? So etwas wie hier? Eventuell in Kombination mit variable fonts? |
Sponsored Links |
|
|||
Die Überschrift ist am Desktop in der Größe perfekt (pixelgenau muss es nichts ein). Wenn nun das fester kleiner wird bricht die Überschrift irgendwann in 2, 3 oder am Handy sogar in 4 Zeilen um und das sieht dann bescheiden aus. Je kleiner der Bildschirm wird desto kleiner darf die Schrift ruhig sein /zu groß sieht hier nicht gut aus. Am Ende wäre dann eine etwas kleinere Schrift und 2 Zeilen am Handy perfekt
Das ich von fix auf variable umsteigen muss ist mir schon klar... Habe schon mit der calc Funktion gespielt, aber habe da noch nichts zufriedenstellendes hin bekommen. |
|
|||
Also... ich habe es selbst gelöst
Die kleinste Schriftgröße ist 24px, die größte 36px Ich habe nun für 13 verschiedene @media min-with die px größe der Schriftgröße definiert. Das klingt jetzt kompliziert. In den Browser Deloper Tools kann man die Festerbreite Pixel für Pixel ändern und glechzeitig die Schriftgröße ändern... so bekommt man innerhalb von ein paar Minuten die nötigen min-with Breiten raus. Nun habe ich am Mobile statt 4 Zeilen überschrift eine etwas kleinere Schrift udn nur 2 Zeilen... und bis zur Desktop Breite wird die Schrift in 1px Schritten größer... immer zum richtigen Zeitpunkt. Mit Calc oder irgendwas anderem hätte ich das nie so genau hin bekommen. So kann ich Pixel genau auf die Breite eingehen und Pixel genau die Schriftgröße anpassen. Mit 13 Schritten ist die @media Lösung machbar. Währen es deutlich mehr gewesen wäre der Aufwand udn der zusätzliche Code zu groß gewesen. Hier im Video sieht man den Umbruch schön. Es geht nur um die Überschrift "Customer Experience & Digital Transformation" https://dlgo.de/header.mp4 ---------------------- Geändert von hatschiii (11.08.2020 um 18:14 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
1em: Schriftgröße auf Mobilgeräten ist viel zu klein | AndreasB | CSS | 3 | 16.11.2018 13:27 |
Frage zur Einheit der Schriftgröße | web334 | CSS | 4 | 21.01.2012 12:45 |
Schriftgröße: px oder em? | Tobe | CSS | 15 | 12.03.2008 19:57 |
Zeilenumbruch durch Codestruktur | MANIK | (X)HTML | 11 | 23.09.2007 16:37 |
Schriftgröße in verschiedenen Browsern | kadees | CSS | 6 | 16.11.2006 13:25 |