Сокращает текст тогда, когда нет необходимости
.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;