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

#html #css

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



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

479


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

Ответы

Ответ 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; /* Курсивное начертание */
   }

  

    
4
  
  

    
79
    
баллов
  





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


Ответ 2

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

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



.test sup {
  display: inline-flex;
  flex-direction: column;
}
479Баллов




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



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

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