日韩精品在线播放视频,污污网站免费看,日本三日本三级少妇三级66

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

有時候網頁中的文字因為特別要求不能橫向顯示，這時候所需要的就是讓文字來豎排顯示，那么，網頁中如何讓文字豎排顯示呢？接下來本篇文章將介紹css實現文字豎排顯示的方法。

css文字豎排顯示的方法一：

使用writing-mode屬性

語法：writing-mode:lr-tb或writing-mode:tb-rl

參數：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;*/  
    writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/  
}  
</style>  
<body>  
    <div class="one">十輪霜影轉庭梧，此夕羈人獨向隅。
未必素娥無悵恨，玉蟾清冷桂花孤。 </div>  
</body>  
</html>

css文字豎排顯示效果如下：

2345截圖20180918134335.png

這種方法兼容性不好，只有在IE瀏覽器中才能支持，所以并不推薦使用，這里就不過多介紹要想了解更多可以參考css在線手冊。

css文字豎排顯示的方法二：

對文字對象寬度設置只能排下一個文字的寬度距離，讓文字一行排不下兩個文字使其文字自動換行，就形成了豎立排版需求。

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

注意：word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/

說明：對文字DIV設置較小的寬度，以達到一排只能排下一個文字，這樣文字就自動換行，實現垂直豎列排版。

css文字豎排顯示的效果如下：

2345截圖20180918120146.png

css文字豎排顯示的方法三：

推薦使用這種方法，覺得這個方法兼容性也好，而且代碼簡潔

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h1>中秋月</h1>
</body> 
</html>

css文字豎排顯示效果如下：

2345截圖20180918135034.png

css文字豎排顯示的方法四：

使用br換行讓其文字垂直豎排顯示

利用html br換行標簽實現文字換行，對每個文字后加上換行br標簽讓其豎列排版。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注釋說明：設置css文字居中，css行高為22px間隔 */ 
    </style> 
    </head> 
    <body> 
    p<br>h<br>p<br>中<br>文<br>網
    </body> 
    </html>

css文字豎排顯示的效果如下：

2345截圖20180918135728.png

本篇文章到這里就介紹完了，其實還有很多的方法可以實現文字豎排顯示，這里就不一一介紹了。更多精彩可以關注php中文網。

以上就是css文字如何豎排顯示？css文字豎排顯示的方法的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css文字如何豎排顯示？css文字豎排顯示的方法

本類教程下載

系統下載排行