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

前端之家收集整理的这篇文章主要介绍了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属性.

原文链接:https://www.f2er.com/css/216285.html

猜你在找的CSS相关文章