Div не определяет максимальную ширину родительского элемента css-grid, многоточие никогда не происходит - PullRequest
Новая
       15

Div не определяет максимальную ширину родительского элемента css-grid, многоточие никогда не происходит

3 голосов
/ 10 апреля 2019

У меня есть сетка с 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>, и равномерно распределить его ширину между тремя колонками.Текст внутри столбцов должен быть усечен с помощью многоточия, чтобы соответствовать родительскому элементу.

1 Ответ

1 голос
/ 10 апреля 2019

Вы вкладываете это слишком много:

  • удалите оболочку 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>
...