Seemingly trivial: right-aligned text…

[blazej]

Dear Forum,

I am having a very strange problem when trying to right-align text inside of a <div>.

My <div> has limited width and height, and it contains text that is longer than the width of the <div>.

I would like the text to be right-aligned.

The text displayed inside the <div> has underscores, e.g. 20120208_Optimisation_Plate_01.

I use “text-align: right” in my CSS.

The problem is that the text does not become right-aligned (in neither Chrome nor FireFox, latest versions). If I remove all underscores (i.e. I have the following; “20120208OptimisationPlate01”), right-alignment fails, too – the text is cut off at the right edge. It only works if there is enough space in the <div> to display the text entirely.

This is how my <div> looks like:

<div style=”text-align: right; height: 20px; width: 70px; padding: 0px; overflow: hidden;”>20120208_Optimisation_Plate_01</div>

20120208_Optimisation_Plate_01

Best,
Michał

[Paulie_D]

The text IS right aligned…it just won’t fit into the div…what exactly are you trying to achieve?

[blazej]

Hi,

I would like that the right side of the text be visible in the div, cut off at its left edge. So, in the example I gave, if 20120208_Optimisation_Plate_01 does not fit, I would like to see …_Plate_01 (for example) in the div.

Best,
Michał

[Paulie_D]

I guess you could fake it but it seems to me that there’s little point in having a div that’s too small for it’s content.

You’d be better off truncating the text string with JS before populating the div.

[blazej]

You’re right, but in this case it’s a compromise. The div cannot be bigger because it contains a legend for a bunch of spatially organized visual elements of specific size. And the text is simply too long. The users say that they care more about what’s at the end of the text.

And, either way, Is it even possible to scale over page elements to the width of an auto-scaled div containing text?

Michał

[Paulie_D]

You can truncate the text with

text-oveflow: ellipsis;

but you’d have to swap the direction with

direction:rtl;

BUT this won’t work properly with those numbers at the front of your text string.

[blazej]

Precisely.

I tried rtl but it displays “words” in a different order, and “words” seem to be separated by underscores, so if my text contains underscores, I’m doomed.

[Paulie_D]

I’m sure we’d love to see a link to see if we can offer any other suggestions.

[TheDoc]

JS to truncate text. Seems like the best/easiest solution to me.

[Senff]

How about this: http://jsfiddle.net/senff/UsGUS/

(borders only to illustrate the div-within-a-div)

[blazej]

Thank you, everyone, the “div in div” solution will undeniably work!

“text-align: right; and overflow: hidden;” does not work. Try the following in jsfiddle:

<div style=”width: 70px; height: 20px; overflow: hidden; text-align: right”>20120208_Optimisation_Plate_01</div>​​​

Best,
Michał

[Author]

Posts