Wie kann ich sicherstellen, dass Text nie vom Bildschirm fällt

Ich habe eine kleine Frage über den Umgang mit Schriftgröße und Fensterbreite. Manchmal sind meine Header nur ein langes Wort und bei kleineren Geräten fällt dieses Wort vom Bildschirm, so dass Sie nur einen kleinen Teil des Wortes sehen.Wie kann ich sicherstellen, dass Text nie vom Bildschirm fällt

Wie kann ich sicherstellen, dass Sie immer das vollständige Wort auf jedem Bildschirm sehen?

Ich habe mehrere CSS-Lösungen versucht, aber als das Wort bricht und auf der nächsten Regel weiter.

Danke!

Quelle

2016-04-18 Wilco Van Meppelen Scheppink

Versuchen Sie es mit der Einheit 'vw' - Breite des Darstellungsbereichs. – agdhruv

Was meinst du mit dem Bildschirm fallen? Meinst du, Text geht in die nächste Zeile? –

Ich denke, dass Sie diese Eigenschaft verwenden können: word-wrap: break-word; – Jainam

Siehe gehen Wenn Sie wirklich eine flexible Lösung wollen, und bereits jQuery für andere Gründe, können Sie einfach das jQuery-quickfit Plugin verwenden, das genau dies tut.

Quelle

2016-04-18 07:37:22 hexblot

Danke! Dies sieht für jedes Szenario sehr einfach und sicher aus. Ich denke, das ist die Lösung, die ich verwenden werde. –

Sie können Medienabfragen verwenden und die Textgröße an verschiedene Bildschirmgrößen anpassen.

Quelle

2016-04-18 07:20:56 Ciprianis

Hallo! Vielen Dank für Ihre Antwort, aber ich "weiß nicht" die Länge der Header, so dass es variabel sein muss, so dass es nie passieren kann, dass der Text vom Bildschirm fällt. –

Wenn Sie möchten, dass die Schriftgröße von der Breite des Bildschirms abhängt, können Sie dies einfach über Medienabfragen tun.

Siehe Demo.

h1 { 
 
    font-size: 0.68em; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    h1 { 
 
    font-size: 0.87em; 
 
    } 
 
} 
 
@media screen and (min-width: 992px) { 
 
    h1 { 
 
    font-size: 1em; 
 
    } 
 
} 
 
@media screen and (min-width: 1200px) { 
 
    h1 { 
 
    font-size: 1.5em; 
 
    } 
 
}

<h1>How can I make sure text never is falling of the screen This is a long header</h1>

Sie können hier für weitere Informationen über verschiedene Medien Gerät Bildschirmgröße

link

Quelle

2016-04-18 07:29:37

Vielen Dank! Sehr interessant, ich habe keine CSS-Lösung erwartet. Was bedeutet "em" eigentlich? –

em bedeutet die Breite eines Großbuchstabens 'M', Sie könnten die Größe in px/pt oder anderen Einheiten für den gleichen Effekt ändern – KWeiss

[Warum verwenden Sie em anstelle von px beim Definieren von Stilen in css] (http: // stackoverflow. com/questions/609517/why-em-anstelle von-px) –

Wie kann ich sicherstellen, dass Text nie vom Bildschirm fällt

Antwort

Verwandte Themen