...

View Full Version : Text clipping



teedoff
11-30-2012, 05:55 PM
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.

Rowsdower!
11-30-2012, 08:45 PM
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?

teedoff
11-30-2012, 08:58 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum