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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

青灯夜游

May 28, 2019 pm 05:57 PM

css

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。