在CSS中，我們可以使用writing-mode屬性來改變文本的書寫方向，將豎排文本改為橫排文本，以下是一些示例代碼：
示例1：將HTML元素從豎排改為橫排
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl; /* 豎排文本 */
}
.horizontal-text {
writing-mode: horizontal-tb; /* 橫排文本 */
}
</style>
</head>
<body>
<div class="vertical-text">這是豎排文本</div>
<div class="horizontal-text">這是橫排文本</div>
</body>
</html>示例2：使用媒體查詢改變文本方向
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
writing-mode: vertical-rl; /* 豎排文本 */
}
@media (orientation: landscape) {
.text-container {
writing-mode: horizontal-tb; /* 橫排文本 */
}
}
</style>
</head>
<body>
<div class="text-container">文本方向根據(jù)屏幕方向改變</div>
</body>
</html>示例3：改變單個(gè)字母的方向
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-letter {
writing-mode: vertical-rl; /* 豎排字母 */
}
.horizontal-letter {
writing-mode: horizontal-tb; /* 橫排字母 */
}
</style>
</head>
<body>
<div class="vertical-letter">A</div>
<div class="horizontal-letter">B</div>
</body>
</html>示例4：改變表格單元格的方向
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-cell {
writing-mode: vertical-rl; /* 豎排單元格 */
}
.horizontal-cell {
writing-mode: horizontal-tb; /* 橫排單元格 */
}
</style>
</head>
<body>
<table>
<tr>
<td class="vertical-cell">豎排單元格</td>
<td class="horizontal-cell">橫排單元格</td>
</tr>
</table>
</body>
</html>
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。
