Menu
I have a span that will contain text. I would like the span to expand to a maximum of 500px to accommodate the text inside. After the max is reached I would like the text to display ellipses for any text overflowing the max-width. Is this possible? I tried the following, but this did not do the trick.
Thanks
{ position: absolute; top: 13px; left: 44px; max-width: 500px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 
289
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
Definition and Usage. The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
Solution # 1: Truncate text for single line This solution works for single-line truncation. Force text to be on a single line: white-space: nowrap; Now, our text should be on the same line and should overflow from the box if it's long enough and wrapped before.
Spans are display:inline by default, which can cause odd behavior when dimensions are assigned to it. If it's being positioned absolutely anyway, you should use a div or set the span to display:block instead.
I'm not sure if this will fix your problem, but it's a start :)
This is an interesting article about getting ellipsis to work on all modern browsers without using javascript.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
