文本溢出行为在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在左侧的文本，但向右溢出。文本合格观察到同样的问题：中心；我希望文本会平均溢出到双方。

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

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

Answer 1

这 ”内联格式上下文“ CSS 2.1规格的部分说：

当线路上的内联框的总宽度小于包含它们的线路框的宽度时，线框中的水平分布由“文本align”属性确定。如果该属性具有“合理”的值，则用户代理也可以在内联框中伸展空间和单词（外线表和内联式块框除外）。

当直列框超过线框的宽度时，将其分为几个框，这些框分布在几个线框上。如果无法拆分内联框（例如，内联框包含一个字符或语言特定的单词断开规则，则禁止内联框中的断路，或者内联框受现役框的影响。 ），然后内联框溢出线框。

所以 text-align 属性仅在线框长度小于块宽度的情况下使用属性。如果行框比其包含元素宽，则 text-align 不考虑财产。

Answer 2

我能够得到您使用后的结果 方向属性, ，例如

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

它在当前版本的Firefox，Safari和IE中起作用。

Answer 3

您可以创建外部信封容器限制大小和内部元素，显示浮动的内容，例如：

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

---

对奥利·霍奇森的想法做出反应：

direction: rtl;

从句子的末端（从右）扔插界（左）（左）（Google Chromev。38）

Answer 4

哦，我以前遇到过。对齐：右仅影响框中的内容，任何溢出总是对齐，只能用“方向”逆转文本的方向。