如何防止 CSS 网格井喷，以便文本溢出省略号起作用

Question

我遇到了 CSS 网格“爆裂”的一些问题，这导致我的文本属性

text-overflow: ellipsis

无法工作。

我看过很多关于此的帖子，并尝试了很多方法，但只是不明白我错在哪里。我可以用一个简单的例子来重现。

就我而言，我使用的是第三方组件，我想将 UI 放入其中一个元素中。

例如，元素

third-party-container

下方是第三部分组件，我的UI包含在

my-container

m中，我希望完全填充

third-party-container

HTML

<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>

CSS

    #third-party-container {
        height: 40px;
        width: 140px;
        background: orange;
    }

    #my-container {
        background: yellow;
        height: 100%;
        width: 100%;
        display:grid;
        align-items: center;
        justify-items: left;
        grid-template-columns: min-content 13px minmax(0, 1fr);
        grid-template-rows: 1fr;
        column-gap: 2px;
        white-space: nowrap;            
    }

    #s1 {
        background: red;  
         grid-row: 1;
         justify-items: left;
         grid-column: 1;          
         align-items: stretch;   
    }

    #s2{
        background: green;
        grid-row: 1;   
        overflow: hidden;               
        grid-column: 2;   
    }

    #s3 {  
        background: pink;
        grid-row: 1;      
        justify-items: left;
        display: grid;
        align-items: center;
        grid-column: 3;                                         
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;   
    }

也可在 此 Plunkr

所以在

my-container

中我有一行，三列。前两列的宽度非常小。第一列可能略有不同，但总是很小。第二个刚刚修复。

第三列

s3

（彩色

pink

）有时可能包含比容器所能容纳的更长的文本。然而，这就是我在上面的例子中看到的......

当我在开发工具中查看此内容时，我可以看到 s3 正在“爆炸”，即未包含在其容器中。

我之前已经通过使用

minmax(0, 1fr)

解决了这个问题，但它在这里不起作用。

外容器有固定的宽度，my-container是100%的。

我做错了什么以及如何让它发挥作用？

Answer 1

问题是在

display:grid

上使用

#s3

。删除它并添加

width:100%

#third-party-container {
  height: 40px;
  width: 140px;
  background: orange;
}

#my-container {
  background: yellow;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: left;
  grid-template-columns: min-content 13px minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: 2px;
  white-space: nowrap;
}

#s1 {
  background: red;
}

#s2 {
  background: green;
  overflow: hidden;
}

#s3 {
  background: pink;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
}

<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>