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

CSS中的文本溢出行为,文本对齐的值为非左,css,overflow,text-align,Css,Overflow,Text Align,给定以下HTML: 我的同僚们是一位杰出的献身者,他们的工作是临时性的 以及以下CSS: p{ 边框:1px纯红; 宽度:200px; 文本对齐:右对齐; 空白:nowrap; } 预期的渲染是什么?我原以为文本会碰到段落的右侧,然后溢出到左侧。Fx/Safari/Opera中观察到的结果将文本向左对齐,但会向右溢出。文本对齐也存在同样的问题:居中;我希望这篇文章的两边都能平分秋色 CSS2.1和CSS3文本似乎没有指定渲染 测试链接:CSS 2.1规范的“”部分说: 当内联线的总宽度

给定以下HTML:


我的同僚们是一位杰出的献身者,他们的工作是临时性的

以及以下CSS:

p{
边框:1px纯红;
宽度:200px;
文本对齐:右对齐;
空白:nowrap;
}
预期的渲染是什么?我原以为文本会碰到段落的右侧,然后溢出到左侧。Fx/Safari/Opera中观察到的结果将文本向左对齐,但会向右溢出。文本对齐也存在同样的问题:居中;我希望这篇文章的两边都能平分秋色

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

测试链接:

CSS 2.1规范的“”部分说:

当内联线的总宽度 行上的框小于宽度 在包含它们的行框中 区域内的水平分布 行框由 “文本对齐”属性。如果 属性的值为“justify”,则 用户代理可以扩展空间和 内联框中的单词(不包括 内联表和内联块框) 还有

当内联框超过宽度时 对于线框,它被拆分为 几个盒子,这些盒子是 分布在几个接线盒上。 如果无法拆分内联框 (例如,如果内联框包含 单个字符或特定语言 破译规则不允许破译 在内联框中,或者如果 内联框受 nowrap或pre的空白值), 然后内联框溢出该行 盒子


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

我可以得到使用后的结果,例如


这在当前版本的Firefox、Safari和IE中都有效。

哦,我以前遇到过这种情况。
右对齐:右对齐只影响框内的内容,任何溢出始终是左对齐的,只有用“方向”反转文本的方向才能改变这一点。

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

HTML:


针对奥利·霍奇森的想法:

direction: rtl;

从句末(从右)将interfunction作为第一个字符(从左)抛出(Google Chrome v.38)

好的,这是我测试用例的一个变通方法。我想的更多的是问题的通用解决方案:例如,文本对齐:居中会发生什么?我不知道问题的通用解决方案。也就是说,我不认为这是个问题。你有一个用例吗?堆叠的图像网格,每个图像下面都有标题。我得到的设计有一些标题,比每个单独的“单元格”都宽,要求它们溢出到其他单元格的顶部可能对实际文本内容产生不良影响,例如数字和标点符号将分别位于行的右侧和左侧。如果可能的话,可以将文本元素摆弄到
float:right它。这里举了很多例子:真的!“从句末(从右)将interfunction作为第一个字符(从左)抛出(Google Chrome v.38)”你找到Chrome 38问题的解决方案了吗?
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
DIV {
    width: 200px;    
    overflow: hidden;
    border: 1px solid red;
}
P {
    float: right;
    white-space: nowrap;
}
direction: rtl;