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