Tekst zachowanie przepełnienie w CSS z non-lewicowych wartości dla text-align

Question

Biorąc pod uwagę następujące HTML:

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

I następujące CSS:

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

Co oczekiwany renderowania być? Spodziewałem się, że tekst przyłoży się do prawej strony pary i przepełni się na lewo. Obserwowane wyniki w Fx/Safari/Opera powodują umieszczenie tekstu w lewo i przepełnienie w prawo. Ten sam problem występuje w przypadku wyrównania tekstu: centrum; Spodziewam się, że tekst przepełni się równo po obu stronach.

CSS2.1 i CSS3 Tekst nie określa renderowania.

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

Answer 1

Sekcja "Inline Formatting Context" z CSS 2.1 specyfikacji mówi:

Gdy całkowita szerokość inline pudełka na linii jest mniejsza niż szerokość z zawierający je wiersz, ich poziomy rozkład w linii w linii prostej jest określony przez właściwość "wyrównywania tekstu" . Jeśli ta właściwość ma wartość "justify", agent użytkownika może rozciągać spacje i słowa w polach wbudowanych (z wyjątkiem tabel inline i bloków wbudowanych ) również .

Gdy skrzynka inline przekracza szerokość pudełka linii, jest ona podzielona na kilka skrzynek i pudełka te rozłożone kilku pól liniowych. Jeśli skrzynka inline nie można podzielić (na przykład jeśli pole inline zawiera pojedynczy znak, lub język szczególne zasady łamanie wyraz odrzucenia takich przerwę w polu inline, czy pole inline jest objęty biały -space wartość nowrap lub pre), , a następnie pole śródliniowe przepełni pole linii .

Tak więc, właściwość text-align jest używana tylko w przypadkach, gdy długość pola liniowego jest mniejsza niż szerokość bloku. Jeśli pole liniowe jest szersze niż jego element zawierający, wówczas właściwość text-align nie jest brana pod uwagę.

Answer 2

Udało mi się uzyskać wynik, który był po użyciu the direction property, np.

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

To działało w aktualnych wersjach Firefox, Safari i IE.

Answer 3

Och, spotkałem się z tym wcześniej. Wyrównanie: prawo wpływa tylko na zawartość w polu, każde przekroczenie jest ZAWSZE wyrównane do lewej, tylko zmiana kierunku tekstu z "kierunkiem" może to zmienić.

Answer 4

Można tworzyć zewnątrz koperty pojemnik ograniczający wielkość i wewnętrzny element prezentujący zawartość płynął do prawej, jak:

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; 
} 

---

W reagować na pomysł Olly Hodgson:

direction: rtl; 

rzuca interpunction od końca kary (z prawej) jako pierwszego znaku (do lewej) Google Chrome (p. 38)