CSS 쓰기 모드 텍스트 레이아웃 속성 사용법에 대한 자세한 설명

구문:

writing-mode : lr-tb | tb-rl

rrree

lr-tb: 기본값. 객체 의 내용은 왼쪽에서 오른쪽으로 수평으로 흐르며, 이전 줄 아래에 다음 줄이 있습니다. 모든 글리프는 수직 및 위쪽입니다. 이 레이아웃은 로마 언어에서 사용됩니다.

tb-rl: 위-아래, 오른쪽-왼쪽. 개체의 콘텐츠는 위에서 아래로, 오른쪽에서 왼쪽으로 수직으로 흐릅니다. 다음 수직 행은 이전 수직 행의 왼쪽에 있습니다. 전각 문자는 수직 위쪽을 향하고, 라틴 문자나 가타카나 등의 반각 문자는 시계 방향으로 90도 회전됩니다. 이 레이아웃은 동아시아 언어에서 일반적으로 사용됩니다.

설명:

개체 콘텐츠 블록의 고유한 쓰기 방향을 설정하거나 검색합니다. 서양 언어는 왼쪽에서 오른쪽, 위에서 아래로 쓰기를 사용합니다. 하지만 아시아 언어에는 상하, 좌우 쓰기 스타일이 있는 경우가 많습니다.

이 속성의 값이 변경되면 text-align 속성과 vertical-align 속성의 효과도 변경됩니다.

스타일 시트 속성은 다음 요소에 대해 상속 가능하지 않습니다.

BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type =입력 입력 유형=텍스트 ISINDEX OPTION TEXTAREA

이 속성의 효과는 누적되지 않습니다. 예를 들어, 상위 객체의 이 속성 값을 tb-rl로 설정한 경우, 하위 객체의 이 속성 값을 tb-rl로 설정해도 하위 객체의 회전이 발생하지 않습니다.

개체의 쓰기 모드 속성이 상위 개체와 다르게 설정된 경우 자체 레이아웃을 갖게 됩니다. 이러한 객체의 너비는 첫 번째로 배치된 상위 객체의 높이를 사용하여 결정됩니다.

다른 쓰기 모드 속성 값을 가진 개체를 사용하는 경우 각 개체에 특정 크기를 지정하면 레이아웃을 전체적으로 더 잘 제어할 수 있습니다.

이 속성은 currentStyle 개체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.

해당 스크립트 기능은 writingMode 입니다.

텍스트 세로 레이아웃 예:

/* 关键字值 */  
writing-mode: horizontal-tb;    /* 默认值 */  
writing-mode: vertical-rl;   
writing-mode: vertical-lr;  
/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */  
writing-mode: inherit;   
writing-mode: initial;   
writing-mode: unset;

html은 다음과 같습니다.

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱，需要做点额外的动作 */  
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

고대 시의 세로 레이아웃을 볼 수 있습니다!

위 내용은 CSS 쓰기 모드 텍스트 레이아웃 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!