8

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

4

4 回答 4

16

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

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

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

于 2010-09-21T10:34:36.770 回答
9

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

当一行上的行内框的总宽度小于包含它们的行框的宽度时，它们在行框中的水平分布由 'text-align' 属性确定。如果该属性的值为“justify”，则用户代理也可以拉伸内联框中的空格和单词（内联表和内联块框除外）。

当一个 inline box 超过 line box 的宽度时，它会被分割成几个 box，这些 box 分布在几个 line box 上。如果内联框不能被拆分（例如，如果内联框包含单个字符，或特定语言的分词规则不允许内联框内的中断，或者如果内联框受到 nowrap 或 pre 的空白值的影响)，则内联框溢出行框。

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

于 2010-09-21T10:33:47.787 回答
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）

于 2014-09-10T11:08:22.133 回答
0

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

于 2010-09-21T10:37:03.463 回答