html 文字竖排效果
廢話不多說，看效果；
實例一：
實現這樣的效果： 文字是 從上而下，從左向右。顯示
屬性：
-webkit-writing-mode：vertical-rl;
writing-mode:lr-tb ;
?html code
<!DOCTYPE html>
<html>
?<head>
??<meta charset="UTF-8">
??<title>文字豎排效果</title>
?</head>
?<style>
??
??.e_content h2.myGift{ width: 80px; height: auto; float: left;? display: block; font-size: 48px; color: #000000; text-align: center;? margin: 30% 30px 10% 70px;}
??.e_content_mian { width:150px; float: left;? margin: 100px 20px? 100px 0px;? height: 480px;background: #00FF00; }
??.e_content_mian p{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr;? font-size:24px;color: #000000; padding: 0px 0px; text-align:?justify;}???
??
?</style>
?<body>
??<div class="e_content_mian">
???<p>
???
???禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
???禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
???</p>
??</div>
?</body>
</html>
實例二：
效果圖
實現這樣的效果： 文字是 自上而下， 從右向左
屬性：
-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;
html code
<!DOCTYPE html>
<html>
?<head>
??<meta charset="UTF-8">
??<title>文字豎排顯示</title>
??<style>
???
???.f_mian{ width:300px ;? height: 450px;? float: right; margin: 0px 50px; overflow: auto;}
???.f_mian p{
????-webkit-writing-mode:vertical-rl;
????writing-mode:tb-rl;
????writing-mode:vertical-rl;
????text-align: justify;?
????font-size:24px;
????color: #000000;
????padding: 0px 0px;
????display: block; float: right;}
???
??</style>
?</head>
?<body>
??<div class="f_mian">
????<p>
?????禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
?????禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
?????禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
??????????
????</p>
????????
??</div>
?</body>
</html>
取值
Horizontal-tb:水平方向自上而下的書寫方式。即。Left-right-top-bottom（類似IE私有值 lr-tb）
Vertical-rl:垂直方向自右而左的書寫方式。即top-bottom-right-left(類似IE私有值tb-rl)
Vertical-lr:垂直方向自左而右邊的書寫方式。即top-bottom-left-right
Lr-tb:左-右，上-下。對象中的內容在水平方向上從左向右流入。后一行在前一行的下面。所有的字形都是豎直向上的。
tb-rl?: ?上-下，右-左。對象中的內容在垂直方向上從上向下流入，自右向左。后一豎行在前一豎行的左面。全角字符是豎直向上的，半角字符如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的
1.???text-align：justify
text-align:jusify實現文本兩端對齊布局，兼容IE
對于text-align我們再熟悉不過了，可是它有個justify屬性，平時很少用到，就鮮為人知了。justify是一種文本靠兩邊布局方式，一般應用于書刊雜志排版；合理運用text-align:justify有時會省去很多開發的時間。
使用text-align:justify時需要結合另外一個IE私有屬性：text-justify:inter-ideograph??；
text-justify語法：
text-justify : auto |inter-word | newspaper |distribute | distribute-all-lines | inter-ideograph
text-justify參數
auto：允許瀏覽器用戶代理確定使用的兩端對齊法則；
inter-word：通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的兩端對齊行為對段落的最后一行無效；
newspaper ：通過增加或減少字或字母之間的空格對齊文本。是用于拉丁文字母表兩端對齊的最精確格式；
distribute：處理空格很像newspaper，適用于東亞文檔。尤其是泰國；
distribute-all-lines：兩端對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最后一行。適用于表意字文檔；
inter-ideograph：為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格。
因此我們要把text-align:justify;text-justify:inter-ideograph;放在一起來兼容IE瀏覽器：
參考學習網站：
http://www.zhihu.com/question/37423363
http://www.jb51.net/css/110976.html
http://www.divcss5.com/wenji/w596.shtml?jdfwkey=xqmyq2
多看看這些網站，有助于了解css文字豎排效果。
記筆記是個很好的習慣，有助于學習。希望能幫助到你，
總結
以上是生活随笔為你收集整理的html 文字竖排效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker快速入门与使用
- 下一篇： ad中按钮开关的符号_电工新手必经之路：