CSS Flexbox - CSS网格中的截断文本（仅限Firefox）

Question

我可以轻松地使用一些文本和一个按钮渲染一个flexbox，如果容器缩小，文本将缩小并用省略号截断：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但是，如果我尝试在网格中渲染这个相同的弹性框，文本将不再在Firefox（使用Ubuntu 16.04的56.0.2）中截断，尽管这似乎在Chrome中仍然正常：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我已经尝试在min-width: 0元素上设置titleBar并使用flex-basis但没有运气。

有什么建议吗？

Answer 1

Firefox似乎需要delete集。

max-width

.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;
}