3

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

как на картинке

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

4<sup>79</sup>

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

7
  • только так и можно или таблицей 22 июн 2018 в 11:23
  • 1
    jsfiddle.net/j1ykr8Lb/19 вот так - но надо доработать
    – user33274
    22 июн 2018 в 11:26
  • @МаксимЛенский оформите ответом может быть)? 22 июн 2018 в 11:30
  • @PauloBerezini можешь доработать и ответить сам
    – user33274
    22 июн 2018 в 11:31
  • а что там дорабатывать только шрифт подобрать, готовый ответ 22 июн 2018 в 11:31

2 ответа 2

3

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

* {
  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. Спасибо за ответ Максим Ленский

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/

Ваш ответ

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

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