2

При добавлении h2 (Не важно внутри или снаружи a) текст начинает смещаться вправо. На примерах ниже это видно. Объясните пожалуйста причину такого поведения и наиболее безболезненный способ использовать h2 в данном случае.

Это происходит только при изменении transform: scale(). Однако transform-origin: center.

Как выглядит с h2.

.bubble_bottom_right {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 1;
  margin: auto;
  max-width: 300px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(264deg, #00ff66, blue);
}

.bubble_bottom_right:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.bubble__content {
  left: 0;
  right: 0;
  top: 50%;
  width: 90%;
  margin: auto;
  color: white;
  overflow: hidden;
  position: absolute;
  text-align: center;
  display: table-caption;
  transform-origin: center;
  transform: translateY(-50%);
}

.bubble__content a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid white;
}
<div class="bubble_bottom_right">
  <div class="genre bubble__content">
    <h3>Центр</h3>
    <a id="statistic__genre" href="#" style="transform: scale(0.5625);">
      <h2>Оченьбольшоеслово</h2>
    </a>
  </div>
</div>

Как выглядит без h2.

.bubble_bottom_right {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 1;
  margin: auto;
  max-width: 300px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(264deg, #00ff66, blue);
}

.bubble_bottom_right:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.bubble__content {
  left: 0;
  right: 0;
  top: 50%;
  width: 90%;
  margin: auto;
  color: white;
  overflow: hidden;
  position: absolute;
  text-align: center;
  display: table-caption;
  transform-origin: center;
  transform: translateY(-50%);
}

.bubble__content a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid white;
}
<div class="bubble_bottom_right">
  <div class="genre bubble__content">
    <h3>Центр</h3>
    <a id="statistic__genre" href="#" style="transform: scale(0.5625);">Оченьбольшоеслово</a>
  </div>
</div>

2 ответа 2

2

Потому что 'оригинальный размер' h2 выходит за границы круга:

введите сюда описание изображения

Если без h2:

введите сюда описание изображения

Если в без h2 написать ОченьбольшоесловоОченьбольшоеслово, оно тоже сдвинутся вправо.

Добавите word-break: break-all; к transform: scale(0.5625), слово разобьется и отцентрируется.

.bubble_bottom_right {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 1;
  margin: auto;
  max-width: 300px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(264deg, #00ff66, blue);
}

.bubble_bottom_right:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.bubble__content {
  left: 0;
  right: 0;
  top: 50%;
  width: 90%;
  margin: auto;
  color: white;
  overflow: hidden;
  position: absolute;
  text-align: center;
  display: table-caption;
  transform-origin: center;
  transform: translateY(-50%);
}

.bubble__content a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid white;
}

h2 {      
  word-break: break-all;
}
<div class="bubble_bottom_right">
  <div class="genre bubble__content">
    <h3>Центр</h3>
    <a id="statistic__genre" href="#" style="transform: scale(0.5625);">
      <h2>Оченьбольшоеслово</h2>
    </a>
  </div>
</div>

1
  • Это следствие. Он выходит за границы из-за того что уходит вправо разве нет? К сожалению, перенос делать нельзя. Суть задачи масштабировать длинное слово что бы оно влезало в одну строчку. Мне кажется что моя ошибка в том что я использую scale который не масштабирует сам DOM элемент, а лишь его отображение. 11 янв 2018 в 13:29
1

Как то так, кстати обертывать блочный "h2" строчным "a" не есть хорошо

.bubble_bottom_right {
  top: 0;
  left: 0;
  width: 25%;
  z-index: 1;
  margin: auto;
  max-width: 300px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(264deg, #00ff66, blue);
}

.bubble_bottom_right:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.bubble__content {
  left: 0;
  right: 0;
  top: 50%;
  width: 90%;
  margin: auto;
  color: white;
  overflow: hidden;
  position: absolute;
  text-align: center;
  display: table-caption;
  transform-origin: center;
  transform: translateY(-50%);
}

.bubble__content h2 {
  display: inline-block;
  margin:0;
  font-size:inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid white;
  transform: scale(0.5625);
}
.bubble__content h2 a{
  text-decoration:none;
  color:inherit;
}
<div class="bubble_bottom_right">
  <div class="genre bubble__content">
    <h3>Центр</h3>
    <h2 id="statistic__genre"><a href="#">Оченьбольшоеслово</a></h2>
  </div>
</div>

Ваш ответ

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

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