點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

如何控制html中的字體的寬度

來源：懂視網責編：小采時間：2020-11-27 18:50:10

如何控制html中的字體的寬度

如何控制html中的字體的寬度:字符字體是沒辦法直接設置width的，不過我們還有其他方法來控制字符字體的寬度。單個字符字體的寬度單個字符字體的寬度只受font-size屬性影響。font-size<!DOCTYPE html> <html lang="en"> <head>

推薦度：

點擊下載本文 文檔為doc格式

導讀如何控制html中的字體的寬度:字符字體是沒辦法直接設置width的，不過我們還有其他方法來控制字符字體的寬度。單個字符字體的寬度單個字符字體的寬度只受font-size屬性影響。font-size<!DOCTYPE html> <html lang="en"> <head>

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

small

font-size: normal
normal

font-size: large
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	默認?？瞻讜粸g覽器忽略。
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>

這里寫圖片描述