8/6/2023 0 Comments Flexbox text overflow ellipsisSince text-overflow:ellipsis requires you to explictly set the width of the element, we have to review the display property of the element.Įlements that have display:inline as their default behaviour will not work. Check the HTML tag default display property White-space:nowrap tells to the browser to collapse white space (change multiple white spaces in a piece of text into one space) and suppress line breaks. This value will not show any scrollbars or give the user opportunity to scroll. In this case, we want to hide/clip the content if it is ![]() Overflow:hidden overrides the default behaviour when the content of an element overflows its width/ height. ![]() a Adding overflow:hidden AND white-space:nowrapįor text-overflow:ellipsis to work correctly, we need to have the following properties set: Take the following example HTML with long text: This does not support widths and therefore the text-overflow:ellipsis will not work! Review the containing element and add a width value that is not percentage (%) Tags such as have a default of display:inline.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |