KevBot KevBot - 5 months ago 15
CSS Question

CSS: ellipsis in middle using flexbox, breaks in safari

I am attempting to create an ellipsis between two pieces of content using flexbox instead of floats. The effect I need probably will never even work with floats.

The first "column" contains information that is less important than what is in the second column, and therefore should truncate before anything ever would in the second column.

This effect is working fine in Chrome and FireFox, but is failing in Safari.

I am using the proper version of Safari according to caniuse, which shows full support for flexbox.

For a live version, and a slim-downed version of what I am trying to achieve:



.parent {
background-color: lightgrey;
padding: 10px 0;
display: flex;
max-width: 410px;
margin-bottom: 2px;
}
.less-important {
background-color: lightpink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
}
.more-important {
background-color: lightgreen;
white-space: nowrap;
padding: 0 5px;
}

<div class="parent">
<div class="less-important">Truncate this text because it is less important</div>
<div class="more-important">The important text</div>
</div>

<div class="parent">
<div class="less-important">No ellipsis</div>
<div class="more-important">Important stuff</div>
</div>

<div class="parent">
<div class="less-important">Less important content</div>
<div class="more-important">Way more important info that will cause ellipsis</div>
</div>








Here is a screenshot of what is happening in Safari:
Flexbox in Safari does not keep the content in the parent element

How can I get this to work in Safari correctly?

Answer

I got it working by specifying the flex: property for .less-important and .more-important:

.parent {
  background-color: lightgrey;
  padding: 10px 0;
  display: flex;
  max-width: 410px;
  margin-bottom: 2px;
}
.less-important {
  background-color: lightpink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  flex: 0 1 auto;
}
.more-important {
  background-color: lightgreen;
  white-space: nowrap;
  padding: 0 5px;
  flex: 0 0 auto;
}
<div class="parent">
  <div class="less-important">Truncate this text because it is less important</div>
  <div class="more-important">The important text</div>
</div>

<div class="parent">
  <div class="less-important">No ellipsis</div>
  <div class="more-important">Important stuff</div>
</div>

<div class="parent">
  <div class="less-important">Less important content</div>
  <div class="more-important">Way more important info that will cause ellipsis</div>
</div>

Comments