Блог

Я только что столкнулся с этой проблемой, есть ли решение для этого?

 .wp-block-tll-blocks-aawp-block .rating-button {
  background-color: #ef970c;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 2;
  border-radius: 100px;
  text-transform: uppercase;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
  padding: 10px 20px;
  text-align: center;
}

.aawp-block-content-col-inner {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
} 

 <a href="#" class="rating-button" target="_blank" rel="noopener">Check availability</a> 

Просто добавьте white-space: nowrap; к своей кнопке, чтобы текст оставался в одной строке.

Как было предложено в правке(частично правильно), a элемент можно заменить button тегом (но не завернутым в элемент привязки), который не будет нарушать фон. Но что еще более важно, чем макет, button тег лучше подходит для оценки, так как в нем нет ссылки на другую страницу, а есть действие, инициированное пользователем. Следовательно, правильное использование button тега вместо тега привязки ( a ).