Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Schreibmodus-Attribut
So verwenden Sie das CSS-Schreibmodus-Attribut
- 青灯夜游Original
- 2019-05-28 17:57:082983Durchsuche
Das CSS-Schreibmodus-Attribut definiert, wie Text horizontal oder vertikal angeordnet wird, und wird verwendet, um die Anzeigerichtung des Texts zu steuern, sodass er je nach Sprache von oben nach unten oder von links nach rechts gelesen werden kann. Westliche Sprachen werden im Allgemeinen in der Schreibweise lr-tb geschrieben, asiatische Sprachen jedoch in der Schreibweise lr-tb |.
Wie verwende ich das CSS-Schreibmodus-Attribut?
Das Schreibmodus-Attribut definiert, wie Text horizontal oder vertikal angeordnet wird.
Syntax:
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
Attributwert:
● horizontal-tb: horizontale Schreibmethode von oben nach unten. Das heißt, links-rechts-oben-unten
● Vertical-rl: Schreibmethode von rechts nach links in vertikaler Richtung. Das heißt, oben-unten-rechts-links
● vertikal-lr: Der Inhalt verläuft in vertikaler Richtung von oben nach unten und in horizontaler Richtung von links nach rechts
● seitwärts -rl: Der Inhalt ist in vertikaler Richtung von oben. Von unten nach unten anordnen
● seitwärts-lr: Inhalt vertikal von unten nach oben anordnen
Beschreibung:
Schreibmodus-Attribut legt Objekte fest oder ruft sie ab. Die inhärente Schreibrichtung des Inhaltsblocks. Westliche Sprachen werden im Allgemeinen in der Schreibweise lr-tb geschrieben, asiatische Sprachen jedoch in der Schreibweise lr-tb |.
Das CSS-Attribut „Schreibmodus“ war früher ein eindeutiges Attribut des IE und wird bereits vom IE5.5-Browser unterstützt. Moderne Browser wie Firefox und Chrome unterstützten den Schreibmodus lange Zeit nicht. Große moderne Browser haben eine stärkere Standardunterstützung für den Schreibmodus implementiert (hauptsächlich aufgrund der aktiven Nachfolge des Firefox-Browsers).
Beispiel für ein CSS-Schreibmodus-Attribut
<!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>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Schreibmodus-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!