Div 不会从 css-grid 父级推断最大宽度，省略号永远不会发生

Question

我有一个grid-template-columns: 1fr 1fr 1fr 的网格布局。每列包含一个 div，其中包含文本。当我的文本变得太大而无法容纳该列时，我希望我的文本显示省略号。列数是随机的。

我尝试为包含文本的 div 使用以下 css：

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

但除非我指定宽度，否则它不会显示省略号。

我的 css 文件：

.top-container {
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.column-container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.column-container-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

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

我的html：

<div>
   <div className="top-container">
       <div style={{background: "grey"}}>first column</div>
       <div style={{background: "yellow"}}>second column</div>
     </div>
     <div className="top-container">
       <div className="column-container-2">
          <div style={{gridColumnStart: 1, background: "blue"}}>
              <div className="truncate">This is my long text</div>
           </div>
           <div style={{gridColumnStart: 2, background: "red"}}>
              <div className="truncate">This is another long text</div>
           </div>
        </div>
        <div className="column-container-3">
           <div style={{gridColumnStart: 1, background: "green"}}>
               <div className="truncate">This is another long text</div>
           </div>
           <div style={{gridColumnStart: 2, background: "purple"}}>
              <div className="truncate">This is another long text</div>
           </div>
           <div style={{gridColumnStart: 3, background: "black"}}>
              <div className="truncate">This is another long text</div>
           </div>
        </div>
     </div>
</div>

您可以在 Stackblitz 上查看代码： https://stackblitz.com/edit/react-rtrhv3

我希望我的

<div className="column-container-3">
           <div style={{gridColumnStart: 1, background: "green"}}>
               <div className="truncate">This is another long text</div>
           </div>
           <div style={{gridColumnStart: 2, background: "purple"}}>
              <div className="truncate">This is another long text</div>
           </div>
           <div style={{gridColumnStart: 3, background: "black"}}>
              <div className="truncate">This is another long text</div>
           </div>
        </div>

与<div style={{background: "grey"}}>first column</div> 的大小相同，并将其宽度均匀地分布在他的 3 列之间。列内的文本应使用省略号截断以适合父级。

Answer 1

你嵌套太多了：

• 删除第二行的 top-container 包装器，
• 现在因为 网格项 的默认 min-width 或 min-height 是 auto，所以您看不到 省略号 - 使用 min-width: 0 重置它对于所有网格项，以及
• gridColumnStart inline 这里也不需要定义。

见下面的演示和updated stackblitz:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div class="container">
          <div style={{background: "grey"}}>first column</div>
          <div style={{background: "yellow"}}>second column</div>
          <div className="column-container-2">
            <div style={{background: "blue"}}>
              <div className="truncate">This is my long text</div>
            </div>
            <div style={{background: "red"}}>
              <div className="truncate">This is another long text</div>
            </div>
          </div>
          <div className="column-container-3">
            <div style={{background: "green"}}>
              <div className="truncate">This is another long text</div>
            </div>
            <div style={{background: "purple"}}>
              <div className="truncate">This is another long text</div>
            </div>
            <div style={{background: "black"}}>
              <div className="truncate">This is another long text</div>
            </div>
          </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

.container {
  display: grid;
  width: 400px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; /* added */
}

.column-container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.column-container-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.column-container-2 > div,
.column-container-3 > div {
  min-width: 0; /* added */
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>