CSS Flexbox - Truncated Text in CSS Grid (Firefox only) [duplicate]

问题

I can easily render a flexbox with some text and a button, where the text will shrink and truncate with an ellipsis if its container shrinks:

.titleBarCtr {
    align-items: center;
    display: flex;
}

.titleBar {
    color: white;
    background-color: green;
    flex: 1;
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding-left: 5px;
    text-align: left;
}

.titleBarCtr .icon {
    background-color: green;
    border-left: 1px solid white;
    color: white;
    cursor: pointer;
    font-size: 1.17em;  /*Matches h3 elems*/
    line-height: 44px;
    height: 44px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
}

.truncatedText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/>
<div class="titleBarCtr">
  <h3 class="titleBar truncatedText">
    Testing a long string that should be truncated
  </h3>
  <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
</div>

However, if I attempt to render this same flexbox inside of a grid, the text will no longer truncate in Firefox (56.0.2 using Ubuntu 16.04), though this seems to work ok in Chrome still:

.root {
    display: grid;
    grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right];
    grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom];
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    position: absolute;
}

.analysisPanel {
    box-shadow: 0 -2px 1px -1px rgba(0,0,0,0.2);
    display: flex;
    flex-flow: column;
    grid-column-start: main;
    grid-column-end: right;
    grid-row-start: analysisPanel;
    grid-row-end: bottom;
}

.titleBarCtr {
    align-items: center;
    display: flex;
}

.titleBar {
    color: white;
    background-color: green;
    flex: 1;
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding-left: 5px;
    text-align: left;
}

.titleBarCtr .icon {
    background-color: green;
    border-left: 1px solid white;
    color: white;
    cursor: pointer;
    font-size: 1.17em;  /*Matches h3 elems*/
    line-height: 44px;
    height: 44px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
}

.truncatedText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/>
<div class="root">
  <div class="analysisPanel">
    <div class="titleBarCtr">
        <h3 class="titleBar truncatedText">
          Testing a long string that should be truncated
        </h3>
        <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
    </div>
  </div>
</div>

I've tried setting min-width: 0 on the titleBar element and playing with flex-basis with no luck.

Any suggestions?

回答1:

Firefox seems to need a max-width set.

.analysisPanel {
  max-width:100%;/* update */
}

.root {
  display: grid;
  grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right];
  grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom];
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  position: absolute;
}

.analysisPanel {
  max-width:100%;/* update */
  box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-flow: column;
  grid-column-start: main;
  grid-column-end: right;
  grid-row-start: analysisPanel;
  grid-row-end: bottom;
}

.titleBarCtr {
  align-items: center;
  display: flex;
}

.titleBar {
  color: white;
  background-color: green;
  flex: 1;
  height: 44px;
  line-height: 44px;
  margin: 0;
  padding-left: 5px;
  text-align: left;
}

.titleBarCtr .icon {
  background-color: green;
  border-left: 1px solid white;
  color: white;
  cursor: pointer;
  font-size: 1.17em;
  /*Matches h3 elems*/
  line-height: 44px;
  height: 44px;
  padding: 0 15px;
  text-align: center;
  text-decoration: none;
}

.truncatedText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="root">
  <div class="analysisPanel">
    <div class="titleBarCtr">
      <h3 class="titleBar truncatedText">
        Testing a long string that should be truncated
      </h3>
      <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/47168389/css-flexbox-truncated-text-in-css-grid-firefox-only

标签

css

flexbox

css-grid