CSS의 writing-mode 속성 쓰기 방향과 호환 가능한 쓰기 방법에 대한 자세한 설명(그림)

쓰기 모드 소개

Css 쓰기 모드는 중국어, 일본어 등 정사각형 텍스트에 맞게 설계되었다고 합니다. 이 속성을 통해 텍스트를 오른쪽에서 배치할 수 있습니다. 왼쪽으로 또는 위에서 위로 아래 레이아웃입니다.

쓰기 모드는

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode: tb-rl;
}

를 사용합니다. 효과는 다음과 같습니다:

Chrome 브라우저:

IE 브라우저:

쓰기 모드의 속성 값은 가로-tb입니다. , 수직-lr , 수직-rl, IE에서 해당 값은 lr-tb, tb-lr, tb-rl입니다.

horizontal-tb가 기본값입니다. writing-mode의 속성값은 대시로 구분되며 XX-OO로 기록할 수 있습니다. 상하로 배열되어 있고, 선은 오른쪽에서 왼쪽으로 배열되어 있습니다. IE의 lr-tb는 텍스트가 왼쪽에서 위로 정렬되고, 줄이 위에서 아래로 정렬된다는 의미이며, tb-rl은 텍스트가 위에서 아래로 정렬되고, 줄이 위에서 왼쪽으로 정렬된다는 의미입니다. lr은 Left와 Right의 약어이고, tb는 Top과 Bottom의 약어입니다. IE에서도 bt-rl, lr-bt 등의 속성값을 사용할 수 있으며, 배열 방식도 더욱 풍부해졌습니다. 그러나 호환성을 위해 쓰기 모드 속성에는 이 세 가지 배열만 사용할 수 있습니다.

위 스크린샷을 보면 쓰기 모드가 텍스트 쓰기 방향을 바꿀 뿐만 아니라 컨테이너의 레이아웃도 변경하는 것을 볼 수 있습니다. Chrome 및 FireFox 브라우저의 div에는 인라인 기능이 있습니다.

IE8 브라우저에서는 전체 div가 가로에서 세로로 변경되며 적응성이 뛰어난 기능이 있습니다.

글쓰기 모드의 목적은 일반적으로 일부 시 또는 복고풍 효과 페이지의 세로 표시를 사용하는 것입니다. 그러나 IE8은 다른 브라우저와 다르기 때문에 인라인 기능이 없습니다. IE에서 효과를 얻으려면 inline-block을 표시해야 합니다.

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode:tb-rl;
    text-align:center;
    line-height:32px;
    letter-spacing: 12px;
    display: inline-block;
 
}
.wrtmod:first-line{
    font-weight:bold;
    color:#0C58A7;
    font-size:18px;
}
 
<div class="wrtmod">
    静夜思<br/>
    窗前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>

writing-mode 쓰기 모드를 변경한 후 text-align:center를 사용하여 위쪽 및 아래쪽 중앙 정렬을 수행합니다. 위의 효과는 쓰기 모드와 결합된 문자 간격 및 ::첫 번째 줄 의사 클래스를 사용하여 고대 시의 쓰기 효과를 달성합니다.

위 내용은 CSS의 writing-mode 속성 쓰기 방향과 호환 가능한 쓰기 방법에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!