Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Text clipping

  1. #1
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts

    Text clipping

    Hi, I have to list items floated with text in each item. When the text becomes too long in the left column, I use text-overflow: ellipsis; to clip the text. However, this has been deemed unacceptable my my pm, as he would like for the text that is usually hidden to always be visible.

    Is there any way to clip the beginning of a line of text, when it becomes to large for its container?

    I think I have a workaround for this that doesn't involve hiding the beginning of the text, but thought out of curiosity I'd like to know if it's possible.

    Thanks for any help.
    Teed

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by teedoff View Post
    Hi, I have to list items floated with text in each item. When the text becomes too long in the left column, I use text-overflow: ellipsis; to clip the text. However, this has been deemed unacceptable my my pm, as he would like for the text that is usually hidden to always be visible.

    Is there any way to clip the beginning of a line of text, when it becomes to large for its container?

    I think I have a workaround for this that doesn't involve hiding the beginning of the text, but thought out of curiosity I'd like to know if it's possible.

    Thanks for any help.
    This is completely untested by me (and not semantic since your text is really ltr) but I wonder if simply changing the text direction to "rtl" for that piece would make the ellipsis method do what you want. Logically, it SHOULD do it...I'm just not sure if it actually would do it.

    EDIT: I just tested it, and it works (at least in FF)! Just use direction:rtl; along with your overflow:ellipsis;, but recognize that users expecting rtl text will be sorely disappointed!

    Out of curiosity: what does your pm have against the ellipsis method?
    Last edited by Rowsdower!; 11-30-2012 at 07:50 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rowsdower! View Post
    This is completely untested by me (and not semantic since your text is really ltr) but I wonder if simply changing the text direction to "rtl" for that piece would make the ellipsis method do what you want. Logically, it SHOULD do it...I'm just not sure if it actually would do it.

    EDIT: I just tested it, and it works (at least in FF)! Just use direction:rtl; along with your overflow:ellipsis;, but recognize that users expecting rtl text will be sorely disappointed!

    Out of curiosity: what does your pm have against the ellipsis method?
    Hey Rows, long time. Pm doesn't have anything against ellipsis, but a certain part of text within this particular line of code needs to display.

    For example

    <li>This is some text that may grow dynamically, but I specifically want "Your Account $" to always show regardless of container width.</li>
    <li>This bit of text can be truncated if necessary.</li>

    If the first list item gets too long, the txt is truncated and the ellipsis is displayed. I have a tooltip of sorts that when hovered displays the full text. When the text becomes too long, the bit of text in quotes is the part that always needs to be displayed. Without posting to much sensitive content here, basically it displays the users cash amount in their account.

    I only have a limited amount of space for the ul with two list items. I know this might all sound cryptic, but its really difficult for me to explain. lol

    I'll see that that ltr does. Thanks!
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •