<!DOCTYPE html> <html> <head> <title>CSS Flexbox: text-overflow in flexbox</title> <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> <link rel="match" href="reference/text-overflow-on-flexbox-001-ref.html"> <meta name="assert" content="This test ensures that the text-overflow on flexbox should have no effect"/> <style> div.flex { display: flex; width: 100px; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="flex"> AAAAAAAAAAAAAAAAAAAA </div> <div class="flex"> <b>bbbbbbbbbbbbbbbbbbbb</b> </div> <div class="flex"> <div>cccccccccccccccccccc</div> </div> <div class="flex"> DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF </div> </body> </html>