CSSの書き込みモード属性の使い方-CSSチュートリアル-php.cn

CSSの書き込みモード属性の使い方

青灯夜游

リリース： 2019-05-28 17:57:08

オリジナル

3027 人が閲覧しました

css writing-mode 属性は、テキストを水平方向または垂直方向に配置する方法を定義し、言語に応じて上から下または左から右に読めるようにテキストの表示方向を制御するために使用されます。西洋言語は通常 lr-tb 方式で記述されますが、アジア言語は lr-tb | tb-rl 方式で記述されます。

CSSの書き込みモード属性の使い方

#CSS 書き込みモード属性を使用するにはどうすればよいですか?

書き込みモードプロパティは、テキストを水平方向または垂直方向にレイアウトする方法を定義します。

構文:

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

ログイン後にコピー

属性値:

●horizontal-tb: 水平トップダウン記述方式。つまり、left-right-top-bottom

#vertical-rl: 右から左への縦書きです。つまり、上-下-右-左

# 垂直-lr: 垂直方向のコンテンツは上から下、水平方向は左から右です

# 横方向-rl: コンテンツを上から垂直方向に配置します。下から下に配置します。

#● Sideways-lr: コンテンツを下から上に垂直方向に配置します。

説明:

writing-mode 属性は、オブジェクトを設定または取得します。コンテンツブロックの固有の書き込み方向。西洋言語は通常 lr-tb 方式で記述されますが、アジア言語は lr-tb | 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 中国語 Web サイトの他の関連記事を参照してください。