CSS: запретить дочернему элементу с текстовым содержимым увеличивать размер окна - PullRequest
Новая
       4

CSS: запретить дочернему элементу с текстовым содержимым увеличивать размер окна

0 голосов
/ 26 октября 2018

У меня есть элемент с длинным текстовым содержимым, который я хочу обрезать / сжать, когда он больше ширины родительского элемента. Однако вместо усечения / сжатия в стиле «текст ...» вся ширина окна увеличивается, и появляется горизонтальная полоса прокрутки. Как я могу это исправить и вообще, как предотвратить дочерний элемент, чтобы увеличить ширину родительского элемента? Обратите внимание, что элемент содержимого находится внутри элемента flex.

Пример кода https://codepen.io/anon/pen/BqMNXe:

HTML 

<body>
  <nav>
  </nav>

  <main>
    <article>
        lorem ipsum dolores lorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum dolores
    </article>
  </main>
</body>

CSS 

    body{
        display: flex;
        height: 100%;
    }

    html {
      height: 100%;
    }

    nav {
        background-color: aquamarine;
        width: 20em;

        flex-shrink: 0;
        overflow-y: scroll;
        border-right: 0.2em solid black;
    }

    main {
        background-color: bisque;
        flex-shrink: 1;
        flex-grow: 1;
    }

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

Спасибо, Z

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Попробуйте указать ширину для навигации и основного процента.

Например: 

   nav {
    background-color: aquamarine;
    width: 30%;

    flex-shrink: 0;
    overflow-y: scroll;
    border-right: 0.2em solid black;
}

main {
    background-color: bisque;
    width: 70%;

}
0 голосов
/ 26 октября 2018

Удалить: 

 white-space: nowrap;

от вас статья css класс.

Или если вы имеете в виду, что хотите обрезать свой текст. Вам понадобится фиксированная ширина или если вы хотите сделать это с flexbox: смотри это

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...