Search code examples
cssflexboxmobile-safari

CSS3 flexbox layout with ellipsis doesn't work on mobile Safari

The following demo (submitted as an SO answer) illustrates usage of ellipsis with flexbox layout. However, it doesn't seem to work on mobile Safari - the text is not shortened at all (tested on iPhone 5, iPhone X and iOS 11.4 emulator in XCode). It works on all desktop browsers including Safari.

http://jsfiddle.net/Blender/kXMz7/1/

.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    
    min-width: 0;
}

.icon-div {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}
<div class="parent-div">
  <div class="icon-div">X</div>
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
</div>

Is this a known problem?

Solution

  • https://www.w3schools.com/css/tryit.asp?filename=trycss3_text-overflow, sets width to truncate the characters when the given width isn't enough.

    Although while using flex, setting 'width' is not recommended. I just added flex-basis: 40%; in 'text-div' class and I could see the truncation happening.