testo in CSS con valori non lasciato per text-align

Question

Dato il seguente codice HTML:

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

E il seguente CSS:

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

quello che sarebbe il rendering previsto essere? Mi aspettavo che il testo colpisse il lato destro del para e tracimasse a sinistra. I risultati osservati in Fx/Safari/Opera terminano il testo a sinistra e overflow a destra. Lo stesso problema si osserva con text-align: center; Mi aspetterei che il testo trabocchi ugualmente su entrambi i lati.

Il testo CSS2.1 e CSS3 non sembrano specificare il rendering.

collegamento di prova: http://www.webdevout.net/test?0e&raw

Answer 1

La sezione "Inline Formatting Context" del CSS 2.1 spec dice:

Quando la larghezza totale della linea scatole su una linea è inferiore alla larghezza del casella di riga che li contiene, la loro distribuzione orizzontale all'interno della casella di riga è determinata dalla proprietà "text-align" di . Se la proprietà ha il valore 'justify', l'agente utente può allungare gli spazi e le parole in caselle in linea (ad eccezione di inline-table e inline-block) .

Quando una scatola linea supera la larghezza di un box di riga, viene suddiviso in diverse scatole e queste scatole sono distribuiti su più caselle della riga. Se un riquadrato in riga non può essere divisa (ad esempio, se la casella in linea contiene un singolo carattere , o la lingua specifiche norme di rottura parola non consentire una pausa all'interno del box inline, o se la casella linea è influenzato da una bianco -spazio di valore di nowrap o pre), quindi la casella inlinea sovrasta la casella casella.

Pertanto, la proprietà text-align viene utilizzata solo nei casi in cui la lunghezza della riga di riga è inferiore alla larghezza del blocco. Se la casella di riga è più ampia dell'elemento che la contiene, la proprietà text-align non viene considerata.

Answer 2

Sono riuscito a ottenere il risultato desiderato dopo aver utilizzato the direction property, ad es.

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

Che ha funzionato nelle versioni correnti di Firefox, Safari e IE.

Answer 3

Oh, l'ho già incontrato. L'allineamento: riguarda solo il contenuto all'interno della casella, qualsiasi overflow è SEMPRE allineato a sinistra, solo invertendo la direzione del testo con "direzione" può cambiarlo.

Answer 4

È possibile creare contenitori busta esterna limitare dimensioni e elemento interno che mostra il contenuto galleggiare a destra, come:

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 reagire all'idea di Olly Hodgson:

direction: rtl; 

sta gettando nell'interpunzione dalla fine della frase (da destra) come primo carattere (a sinistra) (Google Chrome v. 38)