Некоректная работа кнопки CSS

Question

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

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;
}

Answer 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>

БЛОГ НА HUSL

Некоректная работа кнопки CSS

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