Содержание с «белым пространством: Nowrap» увеличивает ширину элемента ⇐ CSS

[Anonymous]

Представьте, что у меня есть карта с шириной: Auto , растущий горизонтально с содержанием тела, пока не достигнет определенной максимальной шириной . Эта карта имеет титул однострочный , который следует обрезать и отображать эллипсис, если он слишком долго вписаться в линию. Когда я пытаюсь реализовать это, в зависимости от того, насколько велик текст в заголовке, это заставляет карту выходить за пределы своей максимальной шириной и даже вызывает появление горизонтального свитка на странице, в зависимости от размера окна.
Когда я комментирует белое пространство: ownrap (один из требований к тексту: ellips MAX-WIDTH снова уважается. Вы можете прокомментировать одно и не почесть другого, чтобы проверить, насколько по-разному они ведут себя. Спрыги, построенный, скрытый ">

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

* {
box-sizing: border-box;
}

.app {
display: grid;
grid-template-columns: 1fr;
background-color: lightblue;
}

.list {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 1rem;
}

.card {
width: auto;
max-width: 50%;
padding: 1rem;
color: white;
background-color: darkblue;
}

.card .card-header {
display: flex;
font-weight: bold;
font-size: 0.75rem;
margin-bottom: 1.65rem;
}

.card .card-header .icon {
width: 32px;
height: 32px;
background-color: cyan;
flex-shrink: 0;
margin-right: 0.65rem;
}

.card .card-header .header-text {
min-width: 0;
}

/* version A: text-overflow */
.card .card-header .header-text .title {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* version B: line-clamp
.card .card-header .header-text .title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}*/

.card .card-header .header-text .subtitle {
opacity: 0.5;
}< /code>






Lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Subtitle



Lorem ipsum

Пример более длительного контента:
Тот же CSS, просто более длинное название карты в HTML. Обратите внимание на горизонтальную прокрутку. < /P>



Подробнее здесь: https://stackoverflow.com/questions/797 ... ment-width