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