zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zeilenumbruch durch Anpassung Schriftgröße verhindern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.08.2020, 23:56
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.08.2020, 09:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.073
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.08.2020, 13:15
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2020, 17:04
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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 17:14 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.08.2020, 12:28
Benutzerbild von Dylan
Benutzer
neuer user
 
Registriert seit: 09.10.2007
Beiträge: 65
Dylan befindet sich auf einem aufstrebenden Ast
Standard

Das ganze nennt sich Breakpoints. 13 sind definitiv zu viel, ganz gleich was Browser Developer Tools vorschlagen. 5 Breakpoints reichen:

Code:
@media screen and (max-width: 1280px) {
	
	}

@media screen and (max-width: 960px) {
	
	}
	
@media screen and (max-width: 840px) {
	
	}

@media screen and (max-width: 600px) {
	
	}
	
@media screen and (max-width: 480px) {
	
	}
Neben der / den Headline/s muss auch das hero image hinzugefügt werden, es wird momentan auf 100 % width gezogen, height bleibt statisch fix. Das hero image kann als background-image mit einer height-Angabe in den breakpoints und background-size cover im CSS auf Linie gehalten werden. So bleibt das image proportional sauber, wenn es in der max-width hinterlegt wird.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
1em: Schriftgröße auf Mobilgeräten ist viel zu klein AndreasB CSS 3 16.11.2018 12:27
Frage zur Einheit der Schriftgröße web334 CSS 4 21.01.2012 11:45
Schriftgröße: px oder em? Tobe CSS 15 12.03.2008 18:57
Zeilenumbruch durch Codestruktur MANIK (X)HTML 11 23.09.2007 15:37
Schriftgröße in verschiedenen Browsern kadees CSS 6 16.11.2006 12:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:56 Uhr.