Wie stelle ich den Text nur auf linksbündig ein, wenn die Phrase/der Satz nicht zur nächsten Zeile springt?

Question

Ich arbeite an der Erstellung eines Banners, das nur bei Bedarf angezeigt werden würde. Ich arbeite am Entwurfsprozess und frage mich, ob es eine Technik gibt, die ich sollte, um das Ziel zu erreichen.

Also muss ich Text nur als Mittelpunkt ausrichten, wenn der Ausdruck/Satz als ein Satz passen kann und nicht auf die nächste Zeile springt? Ich setze das Attribut text-align als Mitte, aber wenn der Text lang ist und auf die nächste Zeile springt, wird der Text in Zeile 2 zentriert, was nicht passieren soll. Also habe ich mich gefragt, ob es etwas wie die Verwendung von CSS und HTML zu erreichen?

Suche nur nach ein paar Ideen oder Tipps.

Here is the code

Answer 1

Sie können die CSS-Eigenschaft verwenden white-space:nowrap, um die div zu machen nicht Text zunächst wickeln.

Dann können Sie bestimmen, ob der Text mit den Eigenschaften scrollWidth und innerWidth umschließt. Sie können jquery verwenden, um die Eigenschaft nowrap so zurückzusetzen, dass das Element so angezeigt wird, wie Sie es möchten.

CSS

#innerNotification{ 
    font-family: Arial, Times New Roman; 
    font-size: 8pt; 
    font-weight: bold; 
    color: #9F6000; 
    padding-top: 1%; 
    padding-bottom:1%; 
    text-align: center; 
    white-space:nowrap; 
} 

JS

if ($('#innerNotification')[0].scrollWidth > $('#innerNotification').innerWidth()) { 
    $('#innerNotification').css('white-space','normal'); 
    $('#innerNotification').css('text-align','left'); 
} 

Hier ist ein funktionierendes Fiddle

Answer 2

Sie können Medienabfragen in CSS verwenden. Sie müssen nur die Bildschirmgröße manuell finden, die Sie die Ausrichtung ändern möchten. Ein Beispiel ist

#innerNotification{ 
    text-align:left; 
} 
@media screen and (min-width:700px){ //pick the correct screen width here 
#innerNotification{ 
    text-align:center; 
} 
} 

Die eine Menge von Informationen ist hier auf Medienanfragen: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries