CSS 쓰기 모드 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 쓰기 모드 속성을 사용하는 방법

青灯夜游

May 28, 2019 pm 05:57 PM

css

css writing-mode 속성은 텍스트가 가로 또는 세로로 배열되는 방식을 정의하며, 언어에 따라 위에서 아래로 또는 왼쪽에서 오른쪽으로 읽을 수 있도록 텍스트 표시 방향을 제어하는 데 사용됩니다. 서양 언어는 일반적으로 lr-tb 방식으로 작성되지만 아시아 언어는 lr-tb |rl 방식으로 작성됩니다.

CSS 쓰기 모드 속성을 사용하는 방법

CSS 쓰기 모드 속성을 사용하는 방법은 무엇인가요?

쓰기 모드 속성은 텍스트가 가로 또는 세로로 배치되는 방식을 정의합니다.

구문:

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

속성 값:

●horizontal-tb : 가로형 하향식 글쓰기 스타일입니다. 즉, left-right-top-bottom

● Vertical-rl: 오른쪽에서 왼쪽으로 세로로 씁니다. 즉, top-bottom-right-left

●vertical-lr: 세로 방향의 콘텐츠는 위에서 아래로, 가로 방향은 왼쪽에서 오른쪽으로

#🎜 🎜#●　sideways-rl: 내용이 위에서 아래로 세로 방향으로 배열됨

● sideways-lr: 내용이 아래에서 위로 세로로 배열됨

#🎜🎜 # 설명:

쓰기 모드 속성은 객체 콘텐츠 블록의 고유한 쓰기 방향을 설정하거나 검색합니다. 서양 언어는 일반적으로 lr-tb 방식으로 작성되지만 아시아 언어는 lr-tb |rl 방식으로 작성됩니다.

쓰기 모드 CSS 속성은 IE의 고유 속성이었으며 이미 IE5.5 브라우저에서 지원됩니다. 오랫동안 FireFox 및 Chrome과 같은 최신 브라우저는 쓰기 모드를 지원하지 않았습니다. 주요 최신 브라우저는 주로 FireFox 브라우저의 적극적인 후속 조치로 인해 쓰기 모드에 대한 더 많은 표준 지원을 구현했습니다.

css 쓰기 모드 속성 예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}
.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}
.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
</style>
</head>
<body>
<table>
    <tr>
        <th>value</th>
        <th>Vertical script</th>
        <th>Horizontal script</th>
        <th>Mixed script</th>
    </tr>
    <tr>
        <td>horizontal-tb</td>
        <td class="example Text1"><span>我家没有电脑。</span></td>
        <td class="example Text1"><span>Example text</span></td>
        <td class="example Text1"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="example Text2"><span>我家没有电脑。</span></td>
        <td class="example Text2"><span>Example text</span></td>
        <td class="example Text2"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="example Text3"><span>我家没有电脑。</span></td>
        <td class="example Text3"><span>Example text</span></td>
        <td class="example Text3"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="example Text4"><span>我家没有电脑。</span></td>
        <td class="example Text4"><span>Example text</span></td>
        <td class="example Text4"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="example Text5"><span>我家没有电脑。</span></td>
        <td class="example Text5"><span>Example text</span></td>
        <td class="example Text5"><span>1994年に至っては</span></td>
    </tr>
</table>
</body>
</html>

렌더링:

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사