CSS中的文本溢出行为,文本对齐的非左值

Question

给出以下HTML:

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

以下CSS:

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

预期渲染会是什么？我期待文本对着para的右手边向上溢出并向左边溢出.在Fx/Safari/Opera中观察到的结果将文本向左对接并向右溢出.使用text-align:center观察到同样的问题; 我希望文本对双方都同样溢出.

CSS2.1和CSS3文本似乎没有指定渲染.

测试链接:http://www.webdevout.net/test？ 0e & raw

Answer 1

我能够获得使用direction属性后的结果,例如

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

这适用于当前版本的Firefox,Safari和IE.

Answer 2

CSS 2.1规范的" 内联格式化上下文 "部分说:

当一行上的内联框的总宽度小于包含它们的线框的宽度时,它们在行框内的水平分布由'text-align'属性确定.如果该属性的值为"justify",则用户代理也可以在内联框中展开空格和单词(内联表和内联块框除外).

当内联框超出线框的宽度时,它将被拆分为多个框,这些框分布在多个线框中.如果无法拆分内联框(例如,如果内联框包含单个字符,或者特定于语言的分词规则不允许在内联框中出现中断,或者内联框受到nowrap或pre的空白值的影响),然后内联框溢出线框.

因此,该text-align属性仅用于行框长度小于块宽度的情况.如果线框宽于其包含元素,text-align则不考虑该属性.