Исправление проблем с высотой строки или пробелов с помощью гибкого контейнера и искусственного разрыва строки. ⇐ CSS

[Anonymous]

Я использую гибкий контейнер и искусственный разрыв строки, чтобы разбивать слова, когда это необходимо. Я никогда не осознавал, что это вызывает дополнительный пробел между строками.
Как вы можете видеть в примере, расстояние между строками после разрыва строки после слова КАК больше, чем другие расстояния. между строками.
Родительский элемент div может быть любого размера в любое время как по ширине, так и по высоте, а дочерние элементы всегда будут центрированы по вертикали и могут быть выровнены по левому или правому краю или по центру, поэтому, если Мне не хватает того, что Flex кажется идеальным.

Код: Выделить всё

.outer-container {
height:200px;
width:200px;
}

.flex-container {
display:flex;
gap:.2em;
font-size:20px;
width:100%;
height:100%;
flex-wrap:wrap;
white-space:pre-line;
align-content:center;
justify-content:center;

}

.flex-item {
background:red;
padding:2px;
}

.linebreak {
display:flex;

flex-direction: column;
flex-basis: 100%;
}

Код: Выделить всё

Hi
There
How

Are
You
Everyone
Here
is Fine

Подробнее здесь: https://stackoverflow.com/questions/771 ... line-break