CSS中的文本溢出行为,带有text-align的非左值

给出以下 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文本似乎没有指定渲染.

测试链接http://www.webdevout.net/test?0e&raw

解决方法

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

When the total width of the inline
Boxes on a line is less than the width
of the line Box containing them,their
horizontal distribution within the
line Box is determined by the
‘text-align’ property. If that
property has the value ‘justify’,the
user agent may stretch spaces and
words in inline Boxes (except for
inline-table and inline-block Boxes)
as well.

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属性.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效