css writing-mode
세로쓰기
writing-mode:vertical-lr
<tbody><tr>&lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&gt;Value&lt;/th&gt;&lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&gt;Vertical script&lt;/th&gt;&lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&gt;Horizontal script&lt;/th&gt;&lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&gt;Mixed script&lt;/th&gt;</tr><tr>&lt;td style="border: 1px solid black; padding: 3px;"&gt;**horizontal-tb**&lt;/td&gt;&lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&gt;我家没有电脑。&lt;/td&gt;&lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&gt;Example text&lt;/td&gt;&lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&gt;1994年に至っては&lt;/td&gt;</tr><tr>&lt;td style="border: 1px solid black; padding: 3px;"&gt;**vertical-lr &amp;#xD;
**왼쪽-&amp;amp;gt;오른쪽&lt;/td&gt;&lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&gt;我家没有电脑。&lt;/td&gt;&lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&gt;Example text&lt;/td&gt;&lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&gt;1994年に至っては&lt;/td&gt;</tr><tr>&lt;td style="border: 1px solid black; padding: 3px;"&gt;**vertical-rl &amp;#xD;
**오른쪽-&amp;amp;gt;왼쪽&lt;/td&gt;&lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&gt;我家没有电脑。&lt;/td&gt;&lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&gt;Example text&lt;/td&gt;&lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&gt;1994年に至っては&lt;/td&gt;</tr></tbody>
위 테이블 값 말고도 추가적인 설정 값이 있다.
이게 안될 경우
transform: rotate(90deg);
를 써야하는데, text 기준이 아니라 node기준이라서 영역 전부가 90도 회전한다.
추가로 text-orientation 로 글자마다의 회전도 제어할 수 있다.
🔗original-link