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 Text似乎没有指定渲染。

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

Answer 1

我能够得到使用the direction property之后的结果，例如

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

适用于当前版本的Firefox，Safari和IE。

Answer 2

CSS 2.1规范的“Inline Formatting Context”部分说：

当内联的总宽度   一行上的框小于宽度   包含它们的线框，它们的   内部的水平分布   线框由确定   'text-align'属性。如果说   属性的值为'justify'，the   用户代理可以拉伸空间和   内联框中的单词（除了   内联表和内联块方框）   同样。

当内联框超出宽度时   一个线框，它被拆分成   几个盒子和这些盒子   分布在几个线框上。   如果无法拆分内联框   （例如，如果内联框包含a   单个字符或特定语言   破坏规则不允许休息   在内联框中，或者如果是   内联框受到a的影响   nowrap或pre）的空白值，   然后内联框溢出该行   框。

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

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

对Olly Hodgson的想法作出反应：

direction: rtl;

从句子末尾（从右边）开始作为第一个字符（向左）（Google Chrome v.38）

Answer 4

哦，我以前遇到过这个。对齐：右边只影响框内的内容，任何溢出始终保持对齐，只有用“方向”反转文本的方向才能改变它。

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

4 个答案: