I've adapted jQuery UI MultiSelect Widget so that the text would show all selected labels, but if too many elements are selected to display, the text would be trimmed and ellipsed. I've done it so:
.ui-multiselect .selected-text {
display: block;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The only things that I don't like in that solution is that I had to set display: block
to the element (span). Without it, the width parameter was ignored and the span expanded to the text size.
Is it possible to get ellipsis to work with inline elements (without changing display
to block
)? If so, how to achieve that?
You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Inline elements can actually appear within block elements, as shown below. I've added white padding on the left and right side of each inline element.
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.
The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
There is a display
option that works as a half-way house between inline
and block
, designed for exactly this kind of situation...
it's called
display:inline-block;
Use this instead of block
, and your element will still flow in your content as if it were inline
, but will act as a block
for its contents, which means your ellipsis should work.
You cannot apply text-overflow
to inline elements.
http://dev.w3.org/csswg/css-ui/#text-overflow
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