在 CSS 中垂直渲染 content:attr(data-content)

Question

我想使用 CSS 一个一个地垂直渲染文本。如果使用旋转方法，我们可以得到如下所示，

但我希望呈现如下文本，

谁能告诉我你对此的建议？

注意：我正在使用 CSS 中的 'content:attr(data-content)' 和数据内容设置此文本是 "HELLO"。

Answer 1

这个怎么样：

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>

Answer 2

尝试将其与简单的 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>

Answer 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>

在 CSS 中垂直渲染 content:attr(data-content)

Vertically Render content:attr(data-content) in CSS

html

css

rotation

vertical-text