CSS 쓰기 모드 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-28 17:57:083059검색
css writing-mode 속성은 텍스트가 가로 또는 세로로 배열되는 방식을 정의하며, 언어에 따라 위에서 아래로 또는 왼쪽에서 오른쪽으로 읽을 수 있도록 텍스트 표시 방향을 제어하는 데 사용됩니다. 서양 언어는 일반적으로 lr-tb 방식으로 작성되지만 아시아 언어는 lr-tb |rl 방식으로 작성됩니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!