0

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?

brabec
  • 4,632
  • 8
  • 37
  • 63
  • I would try putting that text in another span and then put the ellipsis on the span (with display inline block and max-width 100%;) – Pete Aug 09 '18 at 11:47

1 Answers1

1

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.

pritam
  • 2,452
  • 1
  • 21
  • 31