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

149 Views Asked by Ponmalar At 09 April 2025 at 04:30

I would like to render text vertically one by one using CSS. If using rotation method, we can get like below,

But I am expected to render the text like below,

Could anybody tell me your suggestion on this?

Note: I am setting this text using 'content:attr(data-content)' in CSS and data-content is "HELLO".

Original Q&A

There are 3 best solutions below

ketan On 12 February 2016 at 06:16 BEST ANSWER

You can break each character of content:attr(data-content) like following way:

.test::after {
    content: attr(data-content);
    font-size: 25px;
}
.test {
    width: 0;
    word-break: break-all;
}

<div class="test" data-content="Hello"></div>

Mandeep Maan On 12 February 2016 at 06:05

Try using this with simple HTML instead of with 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>

Rahul Tripathi On 12 February 2016 at 05:54

How about this:

h1 span { display: block; }

<h1>
   <span> H </span>
   <span> E </span>
   <span> L </span>
   <span> L </span>
   <span> O </span>
  </h1>

or you can try like this using word-wrap: break-word;:

h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
  }

<h1> HELLO </h1>

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

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in ROTATION

Related Questions in VERTICAL-TEXT

Trending Questions

Popular # Hahtags

Popular Questions