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

Question

我可以很容易地渲染一个带有一些文本和一个按钮的 flexbox，如果它的容器收缩，文本将收缩并用省略号截断：

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

但是，如果我尝试在网格内呈现相同的 flexbox，文本将不再在 Firefox 中截断（56.0.2 使用 Ubuntu 16.04），尽管这似乎在 Chrome 仍然：

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

我试过在 titleBar 元素上设置 min-width: 0 并尝试使用 flex-basis 但没有成功。

有什么建议吗？

Answer 1

Firefox 似乎需要 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;
}

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

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

CSS Flexbox - Truncated Text in CSS Grid (Firefox only)

css

flexbox

css-grid