问题描述
给出以下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; }
预期的渲染结果是什么?我期望文本会紧靠在段落的右侧，并溢出到左侧.在Fx/Safari/Opera中观察到的结果将文本向左对齐，但向右溢出.使用text-align:center;会观察到相同的问题.我希望文本会同时向两边溢出.
What would the expected rendering be? I was expecting the text to butt up against the right hand side of the para and overflow off to the left. Observed results in Fx/Safari/Opera butt the text to the left and overflow to the right though. The same problem is observed with text-align:center; I’d expect the text to overflow equally to both sides.
CSS2.1和CSS3文本似乎没有指定渲染.
CSS2.1 and CSS3 Text don’t seem to specify the rendering.
测试链接: http://www.webdevout.net/test?0e&raw
推荐答案
" CSS 2.1规范的内联格式设置上下文" "部分说:
当内联框超过宽度时 线盒的一部分，将其拆分为 几个盒子，这些盒子是 分布在多个线盒中. 如果无法拆分内联框 (例如，如果内嵌框包含一个 单个字符或特定于语言 断词规则不允许中断 内联框中，或者 内联框受 nowrap或pre的空白值)， 然后内联框会溢出该行 框.
When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.
因此，text-align属性仅在线盒长度小于块宽度的情况下使用.如果线框宽于其包含的元素，则不考虑text-align属性.
So, the text-align property is only used in cases where the line box length is less than the block width. If the line box is wider than its containing element then the text-align property isn't considered.
这篇关于CSS中的文本溢出行为，带有非左值的文本对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！