Мне нужно, чтобы вертикальный и горизонтальный текст объединялся с помощью CSS, например, прикрепленное изображение

Я пытался использовать CSS, но не получил точного результата, который хотел

CSS, который я использовал:

p {
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
}
date {
  display: inline-block;
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
  writing-mode: vertical-lr;
}

span {
  -webkit-text-combine: horizontal; /* Safari */
  text-combine-upright: digits 2;
}

HTML-код, который я использовал:

<div>
  <p>NITIN</p>
  <date
    ><span>N</span><span>I</span><span>T</span><span>I</span
    ><span>N</span></date
  >
</div>

html css

21.12.2020 06:10

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

127

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это то, что вы хотите?

Пример Codepen: https://codepen.io/cursorrux/pen/YzGxVoZ

body {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
}
div {
  width: 250px;
  text-align: center;
}
span {
  display: block;
}
.notThis {
  display: inline-block;
}

<div>
  <span>N</span>
  <span>I</span>
  <span class = "notThis">NITIN</span>
  <span>I</span>
  <span>N</span>
</div>

21.12.2020 06:18

Другие вопросы по теме

Закрытие модального окна в vanilla js

Float Right break при переполнении

Дивы продолжают двигаться, казалось бы, случайным образом

Почему встроенный и встроенный блок имеют разную высоту с одинаковым текстовым содержимым

Почему CSS translateZ игнорируется, если у родительского элемента есть собственное преобразование?

Предотвращение перекрытия div только при изменении размера окна (со стилизованными компонентами)

Меньшая горизонтальная полоса прокрутки, чем ширина div? +Нет фиговой подписи?

Разделите UL на два столбца, но не разбивайте вложенные UL.

Как я могу изменить цвет большого пальца JFXSlider в соответствии с цветом ползунка в текущем положении большого пальца на ползунке?

Адаптивное меню со значком гамбургера, выровненным по левому краю

Мне нужно, чтобы вертикальный и горизонтальный текст объединялся с помощью CSS, например, прикрепленное изображение

Ответы 1

Другие вопросы по теме

Похожие вопросы