il comportamento di overflow testo in CSS con valori non-sinistra per il 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; }

Quale sarebbe il rendering previsto essere? Mi aspettavo il testo intromettermi contro il lato destro del para e traboccare verso sinistra. I risultati osservati in Fx / Safari / Opera di testa il testo a sinistra e troppo pieno alla destra però. Lo stesso problema si osserva con text-align: center; Mi aspetto che il testo di overflow anche per entrambe le parti.

CSS 2.1 e CSS3 Text non sembrano indicare la resa.

Prova link: http://www.webdevout.net/test?0e&raw

Answer 1

La sezione " Inline Formattazione Contesto " del CSS 2.1 specifiche dice:

  

Quando la larghezza totale della linea   scatole su una linea è inferiore alla larghezza   del box di riga che li contengono, il loro   distribuzione orizzontale all'interno   casella riga è determinato dalla   proprietà 'text-align'. Se quello   proprietà ha il valore 'justify', il   utente può allungare spazi e   parole riquadrati in riga (eccetto   inline-tavolo e scatole inline-block)   pure.

     

Quando una scatola linea supera la larghezza   di un box di riga, viene suddiviso in   diverse scatole e queste caselle sono   distribuito in diversi riquadrati di riga.   Se un riquadrato in riga non può essere divisa   (Ad esempio, se il testo contiene una linea   singolo carattere, o specifici lingua   infrangere le regole di parola non consentire una pausa   all'interno della scatola in linea, o se il   riquadrato in riga è influenzato da una   valore di white-space di nowrap o pre),   quindi la casella linea overflow riga   di dialogo.

Quindi, la proprietà text-align viene utilizzato solo nei casi in cui la lunghezza di dialogo linea è inferiore alla larghezza del blocco. Se la casella di linea è più ampio rispetto al suo elemento contenente allora la proprietà text-align non è considerato.

Answer 2

sono stato in grado di ottenere il risultato che eri dopo l'utilizzo di la proprietà direzione, ad esempio,

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

È possibile creare al di fuori del contenitore busta di formato limitante e interiore elemento 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)

Answer 4

Oh, ho incontrato prima. L'allineamento: interessa destra solo il contenuto all'interno della scatola, qualsiasi trabocco è sempre allineato a sinistra, solo invertendo la direzione del testo con "direzione" che può cambiare

.