編碼的世界 / 優質文選 / 生涯

css中的文字豎排和間距控制


2022年3月20日
-   

css中的文字豎排和間距控制
文字的豎排和間距控制
豎排
代碼: <DIV style="WRITING-MODE:tb-rl;TEXT-ALIGN:left"><p>文字</p></div>
解釋:writing-mode:文字的寫入模式
            tb-rl:從上到下,從右到左;依此類推你也可以讓文字從上到下再從左到右排列,鍵入tb-lr就行了
            text-align是文本對齊,左對齊、右對齊還是居中,這個在文本編輯頁面上就可以選擇的。
示範:
天淨沙·秋思
元·馬致遠
枯藤老樹昏鴉
小橋流水人家
古道西風瘦馬
夕陽西下
斷腸人在天涯
這樣排版出來的文字方向有些問題,在loadmemory那裏找到了解決辦法,具體如下:
返回日志編輯頁面,點擊上方編輯功能按鈕中“字型”下拉菜單,如果此時你不想更改日志文字的字體,則在字型選單中選取第一項,即“Arial”,然後預覽日志,你會發現日志版面已經是真正的豎排版了。如果你對現有中文字體不滿意,你可以點擊下拉菜單中的“其它字體”,然後輸入相應的TrueType 中文字體,如simsun(宋體),simhei(黑體),mingliu(柳體)等,注意,如果瀏覽者的操作系統中沒有安裝相應的字體,則無法看到你所編輯的相應字體效果。
示範:
天淨沙·秋思
元·馬致遠
枯藤老樹昏鴉
小橋流水人家
古道西風瘦馬
夕陽西下
斷腸人在天涯
你也可以調整文字的間距來獲得更好的視覺效果
代碼: <div style="letter-spacing:0.3em;line-height:13pt"><p>文字</p></div>
解釋: letter-spacing:控制字母間的間距,對中文而言就是字與字之間的間距
             letter-spacing替換為word-spacing:實現英文的詞與詞之間的間距的控制
             line-height是:控制行間距,無論英文還是中文都是一樣的
            實際應用中,請反複調整上面的數值以達到最佳效果。

熱門文章