text-overflow is not working when using display:flex

Your problem here is the lack of “flex-children”. These would need to contain the styles to truncate an element, not the parent container. Try moving the truncate properties to a separate .flex-child class like so: .flex-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/

Ideal method to truncate a string with ellipsis

I like the idea of letting “thin” characters count as half a character. Simple and a good approximation. The main issue with most ellipsizings however, are (imho) that they chop of words in the middle. Here is a solution taking word-boundaries into account (but does not dive into pixel-math and the Swing-API). private final static … Read more

text-overflow:ellipsis in Firefox 4? (and FF5)

Spudley, you could achieve the same thing by writing a small JavaScript using jQuery: var limit = 50; var ellipsis = “…”; if( $(‘#limitedWidthTextBox’).val().length > limit) { // -4 to include the ellipsis size and also since it is an index var trimmedText = $(‘#limitedWidthTextBox’).val().substring(0, limit – 4); trimmedText += ellipsis; $(‘#limitedWidthTextBox’).val(trimmedText); } I understand … Read more

CSS text-overflow: ellipsis; not working?

text-overflow:ellipsis; only works when the following are true: The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work. The element must have overflow:hidden and white-space:nowrap set. The reason you’re having problems here is because the width of your a element isn’t constrained. You do have a width setting, but because … Read more