Menu
Why does the following CSS not work?
a { width: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
433
If your text-overflow is not working you must ensure display, overflow and white-space CSS properties are set to proper values. Ellipsis works in the same way on all types of elements. But you need to use it with caution on Flex, CSS Grid or on a Table.
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.
This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped. The <string> to be used 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.
It's because anchors are as standard, inline elements. Adding display:inline-block will make the above code work.
70
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
