el comportamiento de desbordamiento de texto en CSS con valores no-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 sería la prestación esperada? Yo estaba esperando el texto a tope contra el lado derecho del párrafo y desbordarse hacia la izquierda. Los resultados observados en Fx / Safari / Opera a tope el texto a la izquierda y el desbordamiento de la justicia aunque. El mismo problema se observa con el texto-align: center; Yo esperaría que el texto de desbordamiento por igual a ambos lados.

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

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

Answer 1

La sección " Inline Formateo Contexto " de la CSS 2.1 especificación 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 de línea se determina por la propiedad 'text-align'. Si eso la propiedad tiene el valor 'justificar', la agente de usuario puede estirar espacios y palabras cajas de línea (excepto para inline-table y cajas inline-block) también.

Cuando una caja de línea sobrepasa el ancho de una caja de línea, que se divide en varias cajas y estas cajas son distribuidos en varias cajas de línea. Si una caja de línea no puede ser dividida (Por ejemplo, si la caja de línea contiene una carácter individual o específica lenguaje palabra romper las reglas no permiten un descanso dentro de la caja en línea, o si el caja de línea se ve afectada por una valor de espacio en blanco de nowrap o pre), a continuación, la caja de línea desborda la línea caja.

Así, la propiedad text-align sólo se utiliza en casos donde la longitud caja de línea es menor que el ancho del bloque. Si la caja de línea es más ancho que su elemento que contiene entonces la propiedad text-align no se considera.

Answer 2

Yo era capaz de conseguir el resultado que eras después de usar la propiedad de dirección, por ejemplo,

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

Eso trabajado en las versiones actuales de Firefox, Safari e IE.

Answer 3

Puede crear contenedores sobre exterior que limita el tamaño y el elemento interno que muestra el contenido flotó 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 reacciona 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)

Answer 4

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

.