Сокращает текст тогда, когда нет необходимости

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min-content;
    max-width: 70vw;
    max-height: 70vh;
    border-radius: 10px;
    overflow-y: auto;
    box-shadow: 0 0 24px 12px rgba(0, 0, 0, .1);
}
nav > * {
    display: flex;
    align-items: center;
    gap: 5px 10px;
    padding: 10px;
}
nav > * > *:first-child {
    width: clamp(25px, 10%, 30px);
    fill: #6a6a6a;
}
nav > * div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    width: 100%;
}
<div class="modal">
    <nav>
        <div>
            <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M0 10.992a6.822 6.822 0 0 1 6.82-6.82h6.82a2.271 2.271 0 0 1 2.274 2.274 2.271 2.271 0 0 1-2.273 2.273H6.82a2.271 2.271 0 0 0-2.274 2.273V29.18a2.271 2.271 0 0 0 2.273 2.273h18.188a2.271 2.271 0 0 0 2.273-2.273v-6.82a2.271 2.271 0 0 1 2.273-2.274 2.271 2.271 0 0 1 2.274 2.273v6.82A6.822 6.822 0 0 1 25.008 36H6.82A6.822 6.822 0 0 1 0 29.18Z"></path><path d="m27.878 1.167-2.139 2.131 6.956 6.955 2.138-2.138a3.975 3.975 0 0 0 0-5.627l-1.328-1.321a3.975 3.975 0 0 0-5.627 0zm-3.744 3.737L12.248 16.797a3.925 3.925 0 0 0-.959 1.556L9.186 24.66a1.714 1.714 0 0 0 .412 1.748c.455.462 1.13.618 1.748.412l6.309-2.103a4.027 4.027 0 0 0 1.555-.959l11.886-11.893Z"></path></svg>
            <div>Текст текст текст текст</div>
        </div>
    </nav>
</div>

Как выполнить так, чтобы модальное окно, принимало ширину по содержимому контента. А текст сокращался тогда, когда ширина контента больше допустимой ширины

max-width: 70vw;

Ответы (0 шт):