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

쓰기 모드는 페이지에서 텍스트의 수직 배열을 구현하는 데 자주 사용됩니다. 여기서는 고대 시에서부터 다음까지의 예를 포함하여 CSS의 쓰기 모드 텍스트 레이아웃 속성을 사용하는 방법을 체계적으로 살펴보겠습니다. 쓰기 모드 텍스트의 세로 배열을 보여줍니다.

구문:

writing-mode : lr-tb | tb-rl

/* 关键字值 */
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;

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

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

설명:
개체 콘텐츠 블록의 고유한 쓰기 방향을 설정하거나 검색합니다. 서양 언어는 왼쪽에서 오른쪽, 위에서 아래로 쓰기를 사용합니다. 하지만 아시아 언어에는 상하, 좌우 쓰기 스타일이 있는 경우가 많습니다.
이 속성의 값이 변경되면 text-align 속성과 Vertical-align 속성의 기능도 변경됩니다.
다음 요소에 대해서는 스타일 시트 속성을 상속할 수 없습니다.
BUTTON CAPTION INPUT INPUT 유형=버튼 INPUT 유형=파일 INPUT 유형=비밀번호 INPUT 유형=재설정 INPUT 유형=제출 INPUT 유형=텍스트 ISINDEX OPTION TEXTAREA

해당 속성의 효과는 누적되지 않습니다. 예를 들어, 상위 객체의 이 속성 값을 tb-rl로 설정한 경우, 하위 객체의 이 속성 값을 tb-rl로 설정해도 하위 객체의 회전이 발생하지 않습니다.
객체의 쓰기 모드 속성 설정이 상위 객체의 속성 설정과 다른 경우 자체 레이아웃을 갖게 됩니다. 이러한 객체의 너비는 첫 번째로 배치된 상위 객체의 높이를 사용하여 결정됩니다.
다른 쓰기 모드 속성 값을 가진 개체를 사용하는 경우 각 개체에 대해 특정 크기를 지정하면 레이아웃을 전체적으로 더 잘 제어할 수 있습니다.
이 속성은 currentStyle 개체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 writingMode입니다.

텍스트 세로 레이아웃 예:

.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;   
}

html은 다음과 같습니다.

<p class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</p>

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

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