text-align, text-decoration, text-indent, text-overflow, text-shadow, text-transform

text-align | text-decoration | text-indent | text-overflow | text-shadow | text-transform

text-align

設定區塊中的文字行內容，如何對齊，可設為：

1. left：向左靠。此為預設值。
2. right：向右靠。
3. center：排在中央。
4. justify：兩邊對齊。會自動在文字之間加入空白，使兩邊的字都對齊邊界。
5. 字串：用在報表（TABLE）。設定一個字串，報表小方格的內容，會依字串對齊。
6. inherit：繼承父元素的特徵值。

<p style='width:60%; background:#339'> text-align:left。此為預設值。 </p> <p style='text-align:right; width:60%; background:#339'> text-align:right </p> <p style='text-align:center; width:60%; background:#339'> text-align:center </p> <p style='text-align:justify; width:30%; background:#339'> text-align:justify：兩邊對齊。 John F. Kennedy said: ask not what your country can do for you - ask what you can do for your country. </p>

• 上面 justify 的例子，Firefox 會在中文間加入空白；IE6, Safari, Chrome 只會在空白處加入空白。

字串對齊 <style type='text/css'> .clsa { border-collapse: separate; table-layout:auto } .clsa TD { text-align: '.'; width:120px; border:red solid 1px} </style> <table class='clsa' > <tr><td>11.4 <tr><td>0.8 <tr><td>100.345 </table>

• 上例中，TD 元素設定了 text-align: '.'。IE, Firefox 沒有支援此功能；Safari, Chrome 可以成功對齊，但不太穩定，時有時無。

javascript 應用。可以用 style 物件 的特徵 textAlign 讀取或設定特徵值。 <div id='atr3' style='text-align:right; text-decoration:none; text-indent:40px; text-transform:uppercase; background:blue; width:150px; height:100px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.textAlign ); </script>