CSS Flexbox - CSS Grid中的截断文本（仅限Firefox） [英] CSS Flexbox - Truncated Text in CSS Grid (Firefox only)

问题描述

$ b

我可以很容易地用一些文本和一个按钮来渲染一个flexbox，其中的文本将会缩小和截断， snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .titleBarCtr {align-items：center; display：flex;}。titleBar {color：white;背景颜色：绿色; flex：1;身高：44px; line-height：44px;保证金：0; padding-left：5px; text-align：left;}。titleBarCtr .icon {background-color：green; border-left：1px纯白色;白颜色;光标：指针; font-size：1.17em; / *匹配h3 elems * / line-height：44px;身高：44px; padding：0 15px; text-align：center; text-decoration：none;}。truncatedText {white-space：nowrap;溢出：隐藏;文本溢出：省略号;}  

< link href = https://use.fontawesome.com/b911bcf9e2.css =stylesheet/>< div class =titleBarCtr> < h3 class =titleBar truncatedText>测试应该被截断的长字符串< / h3> < a class =iconaria-current =falserole =buttonhref =＃>< i class =fa fa-dashboardaria-hidden =truetitle =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];顶部：0;左：0;正确：0;底部：0;溢出：隐藏; position：absolute;}。analysisPanel {box-shadow：0-2px 1px -1px rgba（0,0,0,0.2）;显示：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;背景颜色：绿色; flex：1;身高：44px; line-height：44px;保证金：0; padding-left：5px; text-align：left;}。titleBarCtr .icon {background-color：green; border-left：1px纯白色;白颜色;光标：指针; font-size：1.17em; / *匹配h3 elems * / line-height：44px;身高：44px; padding：0 15px; text-align：center; text-decoration：none;}。truncatedText {white-space：nowrap;溢出：隐藏;文本溢出：省略号;}

< link href = https://use.fontawesome.com/b911bcf9e2.css =stylesheet/>< div class =root> < div class =analysisPanel> < div class =titleBarCtr> < h3 class =titleBar truncatedText>测试应该被截断的长字符串< / h3> < a class =iconaria-current =falserole =buttonhref =＃>< i class =fa fa-dashboardaria-hidden =truetitle =Load Estimation >< / I>< / A> < / DIV> < / div>< / div>

尝试在 titleBar 元素上设置 min-width：0 ，并使用弹出基础没有运气。

有什么建议吗？

解决方案

Firefox似乎需要一个 max-width 集合。

  .analysisPanel {
最大宽度：100％; / *更新* / 
} 
  

.root {显示：网格; grid-template-columns：[left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right]; grid-template-rows：[top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom];顶部：0;左：0;正确：0;底部：0;溢出：隐藏; position：absolute;}。analysisPanel {max-width：100％; / * update * / box-shadow：0 -2px 1px -1px rgba（0，0，0，0.2）;显示：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;背景颜色：绿色; flex：1;身高：44px; line-height：44px;保证金：0; padding-left：5px; text-align：left;}。titleBarCtr .icon {background-color：green; border-left：1px纯白色;白颜色;光标：指针; font-size：1.17em; / *匹配h3 elems * / line-height：44px;身高：44px; padding：0 15px; text-align：center; text-decoration：none;}。truncatedText {white-space：nowrap;溢出：隐藏; text-overflow：ellipsis;}

< div class = 根 > < div class =analysisPanel> < div class =titleBarCtr> < h3 class =titleBar truncatedText>测试应该被截断的长字符串< / h3> < a class =iconaria-current =falserole =buttonhref =＃>< i class =fa fa-dashboardaria-hidden =truetitle =Load Estimation >< / I>< / A> < / DIV> < / div>< / div>

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?

解决方案

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>

这篇关于CSS Flexbox - CSS Grid中的截断文本（仅限Firefox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！