Home html Rotate text vertically with css

Rotate text vertically with css

Author

Date

Category

You need to rotate the text vertically and place it on the right / left side of the image / text. Implemented with the following code:

. vertical_text {
  transform: rotate (-90deg);
  transform-origin: left top 0;
  position: absolute;
  right: -320px;
  bottom: 0;
}

A problem arises, it is necessary to absolutely position this block of text in relation to the block with the image and the amount of offset depends on the length of the text line. As I understand it, the browser considers that the text remains in the same horizontal state and takes a count from this position. The problem itself is that for each block of text I have to add my own style with my own horizontal offset to fit it to the image / text, I’m trying to find a universal solution for all cases. Photo example:


Answer 1, authority 100%

p {
  writing-mode: tb-rl;
  transform: rotate (180deg);
  font-size: 40px;
} 
& lt; p & gt; lorem ipsum & lt; / p & gt; 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions