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

Question

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

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

.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，您看不到 ellipsis - 使用 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>

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

Div does not infer max width from css-grid parent, ellipsis never happens

css

ellipsis

reactjs

css-grid