Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Seemingly trivial: right-aligned text…

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #37055
    blazej
    Member

    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ł

    #98517
    Paulie_D
    Moderator

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

    #98519
    blazej
    Member

    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ł

    #98523
    Paulie_D
    Moderator

    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.

    #98524
    blazej
    Member

    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ł

    #98526
    Paulie_D
    Moderator

    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.

    #98528
    blazej
    Member

    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.

    #98529
    Paulie_D
    Moderator

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

    #98534
    TheDoc
    Moderator

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

    #98542
    Senff
    Participant

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

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

    #98590
    blazej
    Member

    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ł

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.