text-orientation:수직 및 write-mode:vertical-rl을 지정하여 수평 CSS를 사용하여 수직 텍스트를 표시할 수 있습니다.
구문
CSS 쓰기 모드 및 텍스트 방향 속성의 구문은 다음과 같습니다. -
Selector { writing-mode: /*value*/ text-orientation: /*value*/ }
예시
다음 예는 CSS outline-offset 속성을 보여줍니다.
<!DOCTYPE html> <html> <head> <style> h4 { text-orientation: upright; writing-mode: vertical-rl; line-height: 3; box-shadow: inset 0 0 3px khaki; } </style> </head> <body> <h4>Sed nec tortor</h4> </body> </html>
이것은 다음과 같은 출력을 제공합니다.
예시
<!DOCTYPE html> <html> <head> <style> body { display: flex; flex: 1; } p { text-orientation: upright; writing-mode: vertical-rl; line-height: 3; box-shadow: inset 0 0 13px orange; } </style> </head> <body> <p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> </body> </html>
이것은 다음과 같은 출력을 제공합니다.