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

【问题标题】：Text overflow behaviour in CSS with non-left values for text-alignCSS 中的文本溢出行为，文本对齐的非左值
【发布时间】：2011-04-15 03:14:42
【问题描述】：

给定以下 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

【问题讨论】：

标签： css overflow text-align

【解决方案1】：

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

当内联的总宽度一行上的框小于宽度包含它们的线框，它们的横向分布行框由 “文本对齐”属性。如果说属性的值为 'justify'，用户代理可以拉伸空间和内联框中的单词（除了 inline-table 和 inline-block 框）也是。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

好的，这是我的测试用例的解决方法。我在考虑更多问题的通用解决方案：例如text-align: center 会发生什么？
我不知道该问题的一般解决方案。也就是说，我不相信这是一个问题。你有用例吗？
图片的堆叠网格，每张图片下方的标题。我得到的设计有一些比每个单独的“单元格”更宽的标题，要求它们溢出其他单元格的顶部。
虽然这可能适用于某些情况，但direction: rtl; 可能会对实际文本内容产生不良影响，例如数字和标点符号将分别位于该行的右侧和左侧。如果可能的话，可以将文本元素摆弄到float: right; 它。在这里抛出一堆例子：jsfiddle.net/notacouch/nx6ka3hq

【解决方案3】：

哦，我以前遇到过。 align:right 只影响框中的内容，任何溢出总是左对齐，只有用“direction”反转文本的方向才能改变它。

【讨论】：

【解决方案4】：

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

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）

【讨论】：

确实！ “正在从句末（从右）作为第一个字符（向左）（Google Chrome v. 38）抛出插补”
您找到解决 Chrome 38 问题的方法了吗？