Texto en CSS con valores que no son de izquierda para text-align

Question

Dado el siguiente código HTML:

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

Y el siguiente CSS:

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

¿Cuál puede ser la prestación esperada? Esperaba que el texto chocara contra el lado derecho del para y se desbordara hacia la izquierda. Los resultados observados en Fx/Safari/Opera bloquean el texto a la izquierda y desbordan a la derecha. El mismo problema se observa con text-align: center; Esperaría que el texto se desborde por igual a ambos lados.

CSS2.1 y CSS3 texto no parecen indicar la prestación.

enlace de la prueba: http://www.webdevout.net/test?0e&raw

Answer 1

La sección "Inline Formatting Context" de la especificación CSS 2.1 dice:

Cuando la anchura total de la línea cajas en una línea es menor que el ancho de la caja de línea que los contienen, su distribución horizontal dentro de la caja línea se determina por la propiedad 'text-align'. Si esa propiedad tiene el valor 'justify', el agente de usuario puede estirar espacios y palabras en cuadros en línea (excepto para cuadros en línea y cuadros de bloque en línea) también.

Cuando excede una caja de línea de la anchura de una caja de línea, que se divide en varias cajas y estas cajas son distribuidos a través de varias cajas de línea. Si una caja de línea no se puede dividir (por ejemplo, si la caja de línea contiene un solo carácter , o lenguaje específicos romper las reglas palabra no permitir un descanso dentro de la caja en línea, o si el cuadro de línea se ve afectada por un blanco valor -space de nowrap o pre), entonces la caja de línea desborda la caja de línea .

Así, la propiedad text-align sólo se utiliza en casos en los que la longitud de cuadro de la línea es menor que el ancho del bloque. Si el cuadro de línea es más ancho que su elemento contenedor, no se tiene en cuenta la propiedad text-align.

Answer 2

que era capaz de conseguir el resultado que eras después de usar the direction property, por ejemplo,

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

que trabajaba en las versiones actuales de Firefox, Safari e IE.

Answer 3

Oh, he encontrado antes. El align: derecho sólo afecta el contenido dentro de la caja, cualquier desbordamiento siempre queda alineado, solamente la inversión de la dirección del texto con "dirección" puede cambiar eso.

Answer 4

Puede crear contenedores sobre exterior que limita el tamaño y el elemento interno que muestra el contenido flotaba a derecha, como:

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

---

En reaccionar a la idea de Olly Hodgson:

direction: rtl; 

es tirar interpunction del final de la oración (desde la derecha) como primer carácter (a la izquierda) (Google Chrome v. 38)