text-overflow is not working when using display:flex

by

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/

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How to place elements like this
  3. Flexbox code working on all browsers except Safari. Why?
  4. How to center a flex container but left-align flex items
  5. Left column and stacked right column using flexbox CSS [duplicate]
  6. flex property not working in IE
  7. Last margin / padding collapsing in flexbox / grid layout
  8. Equal width flex items even after they wrap
  9. How to center elements on the last row in CSS Grid?
  10. Change div order with CSS depending on device-width
  11. input / button elements not shrinking in a flex container
  12. How can I combine flexbox and vertical scroll in a full-height app?
  13. Why isn’t object-fit working in flexbox?
  14. Place text after dots inline with the second line of text overflow ellipsis
  15. Flexbox and Internet Explorer 11 (display:flex in ?)
  16. Removing margin from flex items when they wrap
  17. ‘position: sticky’ not working when ‘height’ is defined
  18. Calculator keypad layout with flexbox
  19. Why doesn’t CSS ellipsis work in table cell?
  20. Flexbox column-reverse in Firefox, Edge and IE
  21. Flex item should align left, not center, when it wraps
  22. Flexbox affects overflow-wrap behavior
  23. How to align flexbox columns left and right?
  24. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  25. Prevent a child element from overflowing its parent in flexbox [duplicate]
  26. Why isn’t position:sticky with left:0 working inside a scrollable container?
  27. Chrome does not expand flex parent according to children’s content [duplicate]
  28. Flexbox with fixed header and footer and scrollable content
  29. What are the default values for justify-content & align content?
  30. Sizing flex items on the last row

Leave a Comment