CSS奇特技巧 控制文字豎排

2021-08-30 16:07:16 字數 934 閱讀 7566

樣式表的文書處理屬性中有兩個重要的屬性:writing-mode和text-align。讓我們先看看它們的用法:

1. writing-mode(設定物件書寫方向)

語法:writing-mode : lr-tb、tb-rl

引數:lr-tb:從左向右,從上往下  tb-rl:從上往下,從右向左

示例:div

2. text-align(設定物件中文字的對齊方式)

語法:text-align : left、right、center、justify

引數:left:左對齊  right:右對齊  center:居中  justify:兩端對齊

示例:div

接下來讓我們來製作乙個緊排的例項:   < html >

< head >

< title >豎排文字< /title >

< style type="text/css" >

< !--

.tnt

-- >

< /style >

< /head >

< body >

< div class="tnt" >

確實,在表現文字的豎排在文書處理辦公軟體中非常容易就可以實現。由於這種效果在網頁製作中並不多見,所以這個問題的討論比較少。但是在製作具有中國古代特色的**,如文字歷史、書法、名勝古蹟旅遊等等**時,如果用上豎排的文字,配以古色古香的背景及樸實陳舊的色彩,在視覺上會獲得意想不到的效果。

< /div >

< /body >

< /html >

確實,在表現文字的豎排在文書處理辦公軟體中非常容易就可以實現。由於這種效果在網頁製作中並不多見,所以這個問題的討論比較少。但是在製作具有中國古代特色的**,如文字歷史、書法、名勝古蹟旅遊等等**時,如果用上豎排的文字,配以古色古香的背景及樸實陳舊的色彩,在視覺上會獲得意想不到的效果。

Css實現文字豎排效果

css實現文字豎排效果 詞曰 滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空 青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢 古今多少事,都付笑談中。話說天下大勢 分久必合,合久必分 週末七國分爭,併入於秦。及秦滅之後,楚 漢分爭,又併入於漢。漢朝自高祖斬白蛇而起義,一統天下。後...

用CSS讓網頁文字豎排

1.writing mode 設定物件書寫方向 語法 writing mode lr tb tb rl 引數 lr tb 從左向右,從上往下 tb rl 從上往下,從右向左 示例 div 2.text align 設定物件中文字的對齊方式 語法 text align left right cente...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...