3

При увеличении колличества контента в кнопке, он не вмещается в заданную ширину, а вылазит за пределы самой кнопки. Необходимо, чтоб контент не изменял ширину кнопки, а рос в высоту при увеличении.

CodePen

<div class="header__nav-btn btn">
  <a class="header__btn-link btn-link" href="#">СвязатьсяСвязатьсяСвязаться</a>
</div>


.btn {
    width: 123px;
    border: 1px solid tomato;
}

.btn-link {
    display: block;
    padding: 10px 5px;
    text-align: center;
    text-decoration: none;
}
2
  • можно добаить в стиль кнопки word-break: break-word; 22 мар 2021 в 12:59
  • Хотя бы одно слово такой длины назовите .... 22 мар 2021 в 14:32

1 ответ 1

1

В вашем примере несколько слов, которые не разделены пробелом. По факту получается как одно слово, ширина которого превышает ширину контейнера, поэтому и раздвигает его границы. Есть два варианта:

Вариант overflow: hidden; Подробнее о свойстве

.btn {
  width: 123px;
  border: 1px solid tomato;
  overflow: hidden;
}

.btn-link {
  display: block;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
}
<div class="header__nav-btn btn">
  <a class="header__btn-link btn-link" href="#">СвязатьсяСвязатьсяСвязатьсяСвязаться</a>
</div>

Вариант word-break: break-word; Подробнее о свойстве

.btn {
  width: 123px;
  border: 1px solid tomato;
  word-break: break-word;
}

.btn-link {
  display: block;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
}
<div class="header__nav-btn btn">
  <a class="header__btn-link btn-link" href="#">СвязатьсяСвязатьсяСвязатьсяСвязаться Связаться Связаться Связаться Связаться Связаться</a>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.