- This topic is empty.
March 8, 2012 at 3:51 pm #37055
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
MichałMarch 8, 2012 at 4:14 pm #98517
The text IS right aligned…it just won’t fit into the div…what exactly are you trying to achieve?March 8, 2012 at 4:44 pm #98519
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.
MichałMarch 8, 2012 at 5:15 pm #98523
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.March 8, 2012 at 5:19 pm #98524
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łMarch 8, 2012 at 5:27 pm #98526
You can truncate the text with
but you’d have to swap the direction with
BUT this won’t work properly with those numbers at the front of your text string.March 8, 2012 at 5:32 pm #98528
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.March 8, 2012 at 5:35 pm #98529
I’m sure we’d love to see a link to see if we can offer any other suggestions.March 8, 2012 at 6:56 pm #98534TheDocModerator
JS to truncate text. Seems like the best/easiest solution to me.March 8, 2012 at 8:12 pm #98542SenffParticipant
How about this: http://jsfiddle.net/senff/UsGUS/
(borders only to illustrate the div-within-a-div)March 9, 2012 at 9:58 am #98590
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>
- The forum ‘CSS’ is closed to new topics and replies.