8

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

Just Mohit
  • 141
  • 1
  • 13
Robin Whittleton
  • 6,159
  • 4
  • 40
  • 67

4 Answers4

16

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.

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • OK, that’s a work around for my test case. I was thinking more of a generalised solution to the problem: e.g. what happens with text-align: center? – Robin Whittleton Sep 21 '10 at 10:49
  • I'm not aware of a general solution to the problem. That said, I'm not convinced it is a problem. Do you have a use case? – Olly Hodgson Sep 21 '10 at 11:25
  • Stacked grid of images, captions below each image. The design I’ve been given has some captions that are wider than each individual 'cell', requiring them to overflow over the top of the other cells. – Robin Whittleton Sep 21 '10 at 11:34
  • 3
    While this may work for some cases, `direction: rtl;` can have undesirable effects on actual textual content, e.g. numbers & punctuation marks would be on the right and left sides of the line respectively. If possible one can fiddle with the text element to `float: right;` it instead. Threw a bunch of examples up here: https://jsfiddle.net/notacouch/nx6ka3hq/ – notacouch Feb 02 '16 at 17:53
9

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.

Gareth
  • 133,157
  • 36
  • 148
  • 157
4

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)

Lukáš Fronc
  • 88
  • 4
0

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.

Timo Huovinen
  • 53,325
  • 33
  • 152
  • 143