Text Überlaufverhalten in CSS mit nicht-links-Wert für text-align

Question

In Anbetracht der folgende HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

Und die folgenden CSS:

p { border: 1px solid red; width: 200px; text-align: right; white-space: nowrap; }

Was würde das erwartete Rendering sein? Ich habe erwartet, den Text gegen die rechte Seite der para anstößt und nach links Überlauf ab. Beobachtete Ergebnisse in Fx / Safari / Oper Hintern der Text nach links und Überlauf nach rechts though. Zentrum;: Das gleiche Problem wird mit dem Text-align beobachtet Ich würde den Text Überlauf erwartet gleichermaßen auf beiden Seiten.

CSS2.1 und CSS3 Text scheinen nicht die Wiedergabe angeben.

Test Link: http://www.webdevout.net/test?0e&raw

Answer 1

Die " Inline-Formatierungskontext " des CSS 2.1 Spezifikation sagt:

Wenn die Gesamtbreite des Inline Boxen auf einer Linie ist kleiner als die Breite der Zeilenbox die sie enthalten, ihre horizontale Verteilung innerhalb der Zeilenfeld wird durch die bestimmt 'Text-align' Eigenschaft. Wenn das Eigenschaft hat den Wert ‚rechtfertigen‘, die Benutzeragent kann Räume dehnen und Worte in Inline-Box (mit Ausnahme inline-table und Inline-Block-Boxen) als auch.

Wenn eine Inline-Box die Breite überschreitet eine Zeilen-Box, wird es aufgeteilt in mehrere Kisten und diese Boxen sind über mehrere Zeilen-Boxen verteilt. Wenn eine Inline-Box kann nicht geteilt werden (Zum Beispiel, wenn die Inline-Box enthält eine Einzelzeichen oder sprachspezifische Wort zu brechen Regeln nicht zulassen, eine Pause innerhalb der Inline-Box, oder wenn die Inline-Box wird durch eine betroffen Leerraumwert nowrap oder pre), dann wird die Inline-Box überläuft die Linie Box.

So wird die text-align Eigenschaft nur in Fällen, in denen die Linie Kastenlänge kleiner als die Blockbreite ist. Wenn die Zeilen-Box ist breiter als sein Element enthält, dann wird die text-align Eigenschaft nicht berücksichtigt werden.

Answer 2

Ich konnte das Ergebnis, das Sie waren erhalten, nachdem Richtung Eigenschaft , zB

p { 
    direction: rtl; 
    border: 1px solid red; 
    width: 200px; 
    text-align: right; 
    white-space: nowrap;
}

Das funktioniert in aktuellen Versionen von Firefox, Safari und IE.

Answer 3

Sie können außerhalb Umschlag Container erstellen Größe zu begrenzen und inneres Element zeigt Inhalt schwebte nach rechts, wie:

HTML:

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>

CSS:

DIV {
    width: 200px;    
    overflow: hidden;
    border: 1px solid red;
}
P {
    float: right;
    white-space: nowrap;
}

---

In reagieren auf Olly Hodgson Idee:

direction: rtl;

wirft Interpunktion vom Ende des Satzes (von rechts) als erstes Zeichen (nach links) (Google Chrome v. 38)

Answer 4

Oh, ich habe dies begegnet vor. Die align: wirkt sich direkt nur den Inhalt innerhalb des Feldes, jeder Überlauf wird immer links ausgerichtet, nur die Richtung des Textes mit „Richtung“ umgekehrt kann das ändern

.