CSS: запретить дочернему элементу с текстовым содержимым увеличивать размер окна
У меня есть элемент с длинным текстовым содержимым, который я хочу обрезать / сжать, когда он больше ширины родительского элемента. Однако вместо усечения / сжатия в стиле «текст ...» вся ширина окна увеличивается, и появляется горизонтальная полоса прокрутки. Как я могу это исправить и вообще как предотвратить увеличение дочерним элементом ширины родительского элемента? Обратите внимание, что элемент содержимого находится внутри гибкого элемента.
Пример кода 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
Удалять:
white-space: nowrap;
из вашей статьи css class.
Или, если вы имеете в виду, что хотите обрезать текст. Вам понадобится фиксированная ширина или, если вы хотите сделать это с помощью flexbox: видеть это
Попробуйте указать ширину для навигации и основного процентного соотношения.
Например :
nav {
background-color: aquamarine;
width: 30%;
flex-shrink: 0;
overflow-y: scroll;
border-right: 0.2em solid black;
}
main {
background-color: bisque;
width: 70%;
}
Это могло решить эту проблему. Проблема (ограничение) в том, что мне нужно изменить размер навигации на основе em, чтобы он зависел от размера шрифта. Возможно, я хочу, чтобы навигация была еще более гибкой, и я вообще не хочу использовать фиксированный размер.
Решение, приведенное в ссылке, а именно «добавить
min-width: 0;в дочерний элемент flex», работает хорошо, даже если длинный текстовый контент находится глубже в дереве dom. Спасибо!