Je voudrais rendre le texte verticalement un par un en utilisant CSS. Si vous utilisez la méthode de rotation, nous pouvons obtenir comme ci-dessous,Rendu verticalement du contenu: attr (contenu-données) dans CSS
Mais je suis censé rendre le texte comme ci-dessous,
Quelqu'un pourrait me dire votre suggestion à ce sujet?
Remarque: Je suis en train de ce texte à l'aide « content:attr(data-content) » en CSS et les données de contenu est « BONJOUR ».
Vous pouvez briser chaque caractère de content:attr(data-content) comme manière suivante:
.test::after {
content: attr(data-content);
font-size: 25px;
}
.test {
width: 0;
word-break: break-all;
}<div class="test" data-content="Hello"></div>Que diriez-vous ceci:
h1 span { display: block; }<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> L </span>
<span> O </span>
</h1>ou vous pouvez essayer comme ceci en utilisant word-wrap: break-word;:
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}<h1> HELLO </h1>Essayez d'utiliser cela avec HTML simple au lieu de 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>