Question

Given the following HTML:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</p>

And the following CSS:

p {
  border: 1px solid red;
  width: 200px;
  text-align: right;
  white-space: nowrap; 
}

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 and CSS3 Text don’t seem to specify the rendering.

Test link: http://www.webdevout.net/test?0e&raw

Answer 1

The “Inline Formatting Context” section of the CSS 2.1 spec says:

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.

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.