<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文本似乎没有指定渲染.
解决方法
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属性.