CSS 쓰기 모드 속성

정의와 사용법

writing-mode 문자 행을 수평이거나 직립형으로 배치하는 속성을 정의합니다.

다른 참고:

CSS 교육:CSS 텍스트 효과

예제

문자 행을 수평이거나 직립형으로 배치하는 방식을 정의합니다:

p.test1 {
  writing-mode: horizontal-tb; 
}
p.test2 {
  writing-mode: vertical-rl; 
}
span.test2 {
  writing-mode: vertical-rl; 
}

직접 테스트해 보세요

CSS 문법

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

속성 값

설명
horizontal-tb 콘텐츠가 좌측에서 우측으로 수평형으로 흐르고, 상단에서 하단으로 직립형으로 흐릅니다.
vertical-rl 콘텐츠가 상단에서 하단으로 직립형으로 흐르고, 우측에서 좌측으로 수평형으로 흐릅니다.
vertical-lr 콘텐츠가 상단에서 하단으로 직립형으로 흐르고, 좌측에서 우측으로 수평형으로 흐릅니다.

기술 세부 사항

기본 값: horizontal-tb
thừa kế:
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성
버전: CSS3
JavaScript 문법: object.style.writingMode="vertical-rl"

브라우저 지원

테이블에 표시된 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
48.0 12.0 41.0 11.0 35.0