Вертикально визуализировать контент:attr(data-content) в CSS

Я хотел бы визуализировать текст по одному с помощью CSS. Если использовать метод вращения, мы можем получить как ниже,

Фактическое вращение

Но я должен сделать текст, как показано ниже,

Ожидаемый результат

Кто-нибудь может сказать мне ваше предложение по этому поводу?

Примечание: я устанавливаю этот текст, используя content:attr(data-content) в CSS и data-content - это "HELLO".

3 ответа

Решение

Вы можете разбить каждого персонажа content:attr(data-content) вроде следующим образом:

.test::after {
    content: attr(data-content);
    font-size: 25px;
}
.test {
    width: 0;
    word-break: break-all;
}
<div class="test" data-content="Hello"></div>

Попробуйте использовать это с простым HTML вместо CSS

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
 
<style>
  h1 span { display: block; }
</style>
</head>
<body>
  
  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>
   
</body>
</html>

Как насчет этого:

h1 span { display: block; }
<h1>
   <span> H </span>
   <span> E </span>
   <span> L </span>
   <span> L </span>
   <span> O </span>
  </h1>

или вы можете попробовать это, используя word-wrap: break-word;:

h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
  }
<h1> HELLO </h1>

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