Text overflow behaviour in CSS with non-left values for text-align

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.

Answer 2

I was able to get the result you were after using the direction property, e.g.

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

That worked in current versions of Firefox, Safari and IE.

Answer 3

You can create outside envelope container limiting size and inner element showing content floated to right, like:

HTML:

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

CSS:

DIV {
    width: 200px;    
    overflow: hidden;
    border: 1px solid red;
}
P {
    float: right;
    white-space: nowrap;
}

---

In react to Olly Hodgson's idea:

direction: rtl;

is throwing interpunction from end of sentence (from right) as first char (to left) (Google Chrome v. 38)

Answer 4

Oh, I have encountered this before. The align:right only affects the content within the box, any overflow is ALWAYS left aligned, only reversing the direction of the text with "direction" can change that.