單個字元字型的寬度只受font-size屬性影響。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>單個字元字型的寬度</title> <style> * { margin: 0; border: none; padding: 0; } p { margin: 30px auto; text-align: center; } p span{ line-height: 0; } .s{ font-size: small; } .n{ font-size: normal; } .l{ font-size:large; } </style> </head> <body> <p class="s"> <span>田</span> </p> <p class="n"> <span>田</span> </p> <p class="l"> <span>田</span> </p></body></html>
字型寬度變化明顯（寬x高）：
font-size: small
font-size: normal
font-size: large
多個字元字型的寬度除了字元字型的個數，還有其他幾個屬性可以控制。
1. text-align
text-align 屬性規定元素中的文本的水平對齊。
該屬性通過指定行框與哪個點對齊，從而設定區塊層級元素內文本的水平對齊。
通過允許使用者代理程式調整行內容中字母和字之間的間隔，可以支援值 justify；
不同使用者代理程式可能會得到不同的結果。
取值與描述
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊。預設值：由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實現左右對齊文字效果。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
注意：
①雖然說當text-align值為justify時可以改變字元字型的寬度，但是這裡面有取巧之嫌。並且這個寬度非常的難以控制，不推薦大家使用。
②雖然所有瀏覽器都支援text-align:justify屬性，但是Firefox和Chrome的實現上還是有點不同的。
在chrome瀏覽器中，在定寬的父元素（區塊層級元素）設定
text-align:justify屬性之後，這個效果會作用於所有子項目中。<p style="text-align:justify;width:300px"> <span>這是一段文字，用於自我介紹。</span> <p>這是一段文字，用於自我介紹。</p> </p>span和p元素內的文字都會左右對齊。
在Firefox瀏覽器中，在定寬的父元素（區塊層級元素）設定
text-align:justify屬性之後，這個效果只會作用於區塊層級元素中。<p style="text-align:justify;width:300px"> <span>這是一段文字，用於自我介紹。</span> <p>這是一段文字，用於自我介紹。</p> </p>只有p元素內的文字都會左右對齊。
核心代碼：
<style>* { margin: 0;border: none;padding: 0;}p {margin: 30px auto; width: 300px;}p p{border: 1px solid #000;}</style> <p> <span>這是一段文字，用於自我介紹。大家好，我是一段自己介紹的文字，是的，您沒有猜錯！我就是來湊字數的。 </span> <p> And a youth said, "Speak to us of Friendship." Your friend is your needs answered. He is your field which you sow with love and reap with thanksgiving. And he is your board and your fireside. For you come to him with your hunger, and you seek him for peace. When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay." </p></p>
為了方便觀察，我們選取chrome瀏覽器作為實驗對象。
添加text-align:justify;屬性
p {margin: 30px auto;width: 300px;text-align:justify;//添加的新屬性}
由於text-align:justity屬性不處理強制打斷的行，也不處理塊內的最後一行，換句話說，如果塊內僅有一行文本（該行既是第一行也是最後一行），這時僅設定text-align:justify無法讓該行左右對齊；
因此，該屬性對於改變字元字型寬度的作用微乎其微。
2.word-spacing
word-spacing 屬性增加或減少單詞間的空白（即字間隔）。
該屬性定義元素中字之間插入多少空白符。
針對這個屬性，“字” 定義為由空白符包圍的一個字串。
如果指定為長度值，會調整字之間的通常間隔；
所以，normal 就等同於設定為 0。
允許指定負長度值，這會讓字之間擠得更緊。
取值與描述
| 值 | 描述 |
|---|---|
| normal | 預設。定義單詞間的標準空間。 |
| length | 定義單詞間的固定空間。 |
| inherit | 規定應該從父元素繼承 word-spacing 屬性的值 |
注意： word-spacing屬性只對拼音文字起作用，並且對表意字元不起作用。
3.white-space
white-space 屬性設定如何處理元素內的空白。
取值與描述
| 值 | 描述 |
|---|---|
| normal | 預設。空白會被瀏覽器忽略。 |
| pre | 用等寬字型顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行。 |
| nowrap | 強制在同一行內顯示所有文本，合并文本間的多餘空白，直到文本結束或者遭遇br對象。 |
| pre-wrap | 用等寬字型顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發生換行。 |
| pre-line | 保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。 |
核心代碼
<style>.test p{width:200px; border:1px solid #000;}.normal p{word-wrap:normal;} .pre p{white-space:pre;} .pre-wrap p{white-space:pre-wrap;} .pre-line p{white-space:pre-line;} .nowrap p{white-space:nowrap;} </style> <ul class="test"> <li class="normal"> <strong>normal：</strong> <p>輕輕地我走了 正如我輕輕地來</p> </li> <li class="pre"> <strong>pre：</strong> <p>輕輕地我走了（這裡接很多測試文字） 正如我輕輕地來</p> </li> <li class="pre-wrap"> <strong>pre-wrap：</strong> <p>輕輕地 我走了（這裡接很多測試文字） 正如我輕輕地來</p> </li> <li class="pre-line"> <strong>pre-line</strong> <p>輕輕地 我走了（這裡接很多測試文字） 正如我輕輕地來</p> </li> <li class="nowrap"> <strong>nowrap：</strong> <p>輕輕地我走了 正如我輕輕地來</p> </li></ul>
當元素屬性為white-space:nowrap;且字元字型的個數足夠多時，就可以改變字元字型的寬度。
4.word-break
word-break 屬性規定自動換行的處理方法。
取值與描述
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器預設的換行規則。 |
| break-all | 允許在單詞內換行。 |
| keep-all | 只能在半形空格或連字號處換行。 |
核心代碼
<style> p.test1{width:11em; border:1px solid #000000;word-break:keep-all;}p.test2{width:11em; border:1px solid #000000;word-break:break-all;}</style><p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p><p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
通過設定word-break:keep-all;屬性，有可能會改變了字型字元的寬度。
5.letter-spacing
前面的四種屬性要麼是投機取巧，要麼是難以控制寬度。其實真正能夠控制寬度的屬性只有一個，那就是letter-spacing屬性。
letter-spacing 屬性增加或減少字元間的空白（字元間距）。
取值與描述
| 值 | 描述 |
|---|---|
| normal | 預設。規定字元間沒有額外的空間。 |
| length | 定義字元間的固定空間（允許使用負值）。 |
| inherit | 規定應該從父元素繼承 letter-spacing 屬性的值。 |
核心代碼
<style>.test p{border:1px solid #000;}.normal p{letter-spacing:normal;}.length p{letter-spacing:10px;}</style><ul class="test"> <li class="normal"> <strong>預設間隔</strong> <p>預設情況下的文字間間隔</p> </li> <li class="length"> <strong>自訂的間隔大小</strong> <p>自訂的文字間隔大小Hello world</p> </li></ul>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
