首頁 > 文章 > web前端 > css怎麼讓文字豎的排版

css怎麼讓文字豎的排版

WBOY原創: 2021-11-12 15:10:2628179瀏覽

css中可用writing-mode屬性讓文字豎起排版，只需要給文字元素加上「writing-mode:vertical-lr;」、「writing-mode:vertical-rl;」或「writing- mode:tb-rl」樣式即可。

css怎麼讓文字豎的排版

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css讓文字垂直的排版的方法：

有時候網頁中的文字因為特別要求不能橫向顯示，這時候所需要的就是讓文字來直排顯示，那麼，網頁中要如何讓文字直排顯示呢？接下來這篇文章將介紹css實作文字直排顯示的方法，希望對大家有幫助。

使用writing-mode屬性

writing-mode 屬性定義了文字在水平或垂直方向上如何排布。

語法：

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

參數：

#vertical-rl：垂直方向自右而左的書寫方式。即top-bottom-right-left
vertical-lr：垂直方向內內容由上到下，水平方向從左到右
lr-tb：從左向右，從上往下；
tb-rl：從上往下，從右往左。

範例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
}  
</style>  
<body>  
    <div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>  
</body>  
</html>

效果如下：

css怎麼讓文字豎的排版

#或透過：

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-rl;
    
}  
</style>  
<body>  
    <div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>  
</body>  
</html>

或者：

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: tb-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    
}  
</style>  
<body>  
    <div class="one">好好学习，天天向上。
福如东海，寿比南山。 </div>  
</body>  
</html>

輸出結果：

css怎麼讓文字豎的排版

更多程式相關知識，請造訪：程式設計影片！！

以上是css怎麼讓文字豎的排版的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼讓滑鼠滑過圖片旋轉下一篇：css怎麼讓滑鼠滑過圖片旋轉

看更多