Чтобы настроить ширину блока так, чтобы она соответствовала ширине его содержимого и чтобы обертка автоматически подстраивалась под контент, вы можете использовать свойства CSS, такие как `display: inline-block` или `display: flex`. Вот один из способов решения вашей задачи с помощью `display: inline-block`:
1. Убедитесь, что контейнер (обертка) имеет свойство `display: inline-block`. Это позволяет блоку принимать ширину, равную ширине его содержимого.
2. Используйте `max-width` для ограничения ширины контейнера.
Пример кода:
```html
<div class="wrapper">
<span>Первое слово</span>
<span>Второе слово</span>
<span>Третье слово, которое не помещается</span>
</div>
```
```css
.wrapper {
display: inline-block; /* Изменяем на inline-block */
max-width: 220px; /* Max-width для ограничения ширины */
background-color: green; /* Цвет фона */
padding: 10px; /* Отступы для красоты */
}
```
В данной конфигурации блок будет автоматически подстраиваться под ширину содержимого. Когда два слова помещаются в одну строку и третье слово не помещается, оно переведется на новую строку, а ширина блока останется равной ширине первых двух слов, при этом максимальная ширина будет составлять 220px.
Если у вас есть дополнительные стили или рамки, убедитесь, что они не влияют на общую ширину блока. Обращайте также внимание на отступы и границы, так как они могут влиять на фактический размер контейнера.