Многострочный текст в теге sup

176

29 июля 2018, 04:30

Задача - задать цену с рублями и копейками в верхнем индексе. Однако под копейками должен быть текст баллов.

Без второй строки текста всё решалось тегом . Однако он не подразумевает многострочного текста.

4<sup>79</sup>

Как сделать текст как на картинке?

Answer 1

Добавил шрифт

* { 
  margin: 0; 
  padding: 0; 
  font-weight: 900; 
} 
 
.a, 
.b { 
  display: inline-block; 
  vertical-align: top; 
  color: red; 
  font-variant: small-caps; 
} 
 
.b { 
  line-height: 15px; 
  transform: translateY(30px); 
} 
 
.a p { 
  font-size: 12em; 
  transform: translateY(-30px); 
} 
 
.b p { 
  font-size: 18px; 
} 
 
.b .c { 
  font-size: 4em; 
} 
 
.b .d { 
  transform: translateY(20px); 
} 
 
.noukan { 
  display: inline-block; 
  height: 150px; 
} 
 p { 
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */ 
    font-style: italic; /* Курсивное начертание */ 
   }

<div class="noukan"> 
  <div class="a"> 
    <p>4</p> 
  </div> 
  <div class="b"> 
    <p class="c">79</p> 
    <p class="d">баллов</p> 
  </div> 
</div>

p.s. Спасибо за ответ Максим Ленский

Answer 2

А зачем столько извращений?

Прекрасно работает с минимальными усилиями:

.test sup { 
  display: inline-flex; 
  flex-direction: column; 
}

<div class="test">4<sup>79<i>Баллов</i></sup></div>

Фиддл (слегка украсил шрифты, чтобы размер примерно соответствовал. Подгонять под нужные габариты не стал): https://jsfiddle.net/cq52ky47/

Если в <sup> залезать нельзя (мало ли что позволено, а что нет), то можно вообще слово "Баллов" в псевдоэлемент засунуть, да еще и поиграть со склонением:

https://jsfiddle.net/fcw6e1a3/5/