iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
8
Modern Web

金魚都能懂的CSS必學屬性系列 第 13

Word-spacing - 金魚都能懂的CSS必學屬性

word-spacing 的規則

word-spacing 基本上僅需指定一個值,其撰寫方式像是這樣

word-spacing: block;

word-spacing的作用是設定空白字元的尺寸,其中設定的值有關鍵字與數值,一般來說這個屬性應該不能算是必學的CSS屬性之一,但主要是這個屬性可以用來處理inline物件之間的空白字元,所以特別拿出來提一下,我們先來看看關鍵字的值有哪些

  • normal
  • 數值單位
  • inherit

normal 是設定為預設值,而數值單位則是直接指定一個數字+單位給它,需要特別了解的是,數值是可以為負數的。

word-spacing 對中英文處理的差別

由於 word-spacing 是處理文字間空白字元的尺寸,但是中文文章中其實沒甚麼發生空白字機會,所以一般人不太有機會測試出來這功能,各位可以看看像是下面這樣的設定與結果

HTML

<p>CSS真的這麼難學嗎?說到CSS的學習與教學,基本上最多人會卡到的問題就是CSS屬性這麼多,好難學懂或是學到完整,但實際上學習網頁或是學習CSS,絕對沒有你想像中的困難,透過有系統的分類規劃來學習,反倒能夠讓你輕鬆上手,而不會有這麼大的學習恐懼。</p>

CSS

p{
  background-color: #ccc;
  word-spacing: 30px;
  padding:1em;
}

結果畫面

https://ithelp.ithome.com.tw/upload/images/20200928/201125500V5i5YWXKs.png

可以看到沒有空白字元的話,中文其實一點影響都沒有。

但是如果各位是設計多國語言的話,這時候空白字元就會發生作用了,例如下方這段原始碼案例,每個英文假文單字之間都有一個空白字元,這個空白字元就被 Amos 設定成 30px 了,導致整個空間看起來超大的

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique debitis saepe enim voluptate neque possimus consectetur, tempora amet quasi! Impedit?</p>

CSS

p{
  background-color: #ccc;
  word-spacing: 30px;
  padding:1em;
}

結果畫面

https://ithelp.ithome.com.tw/upload/images/20200928/201125505iDW1eqh8K.png

從上面結果可以看出外語的影響明顯,所以倘若需要使用的話,會需要特別注意這類問題的發生。

word-spacing 不常用,到底會應用在哪裡

在 flex 時代尚未來臨前,其實很多的排版可能會用到 inline-block 這種屬性值來排版,一旦使用了這種做法,就很容易在兩個 inline-block 之間產生一個大約4-5像素的空白空間,這其實就是空白字元搞的鬼,所以既然知道是空白字元搞的鬼,那就好處理啦﹐我們可以利用 word-spacing 來將這個空白字元變小,讓它可以小到讓兩個 inline-block 物件貼的緊緊的,真的超簡單啦,馬上就來看看怎麼處理吧

HTML

<ul class="list">
  <li>金魚都能懂</li>
  <li>金魚懂不懂</li>
  <li>金魚裝不懂</li>
  <li>金魚全都懂</li>
</ul>

CSS

.list{
  list-style:none;
  word-spacing: -4px;
}
.list li{
  display: inline-block;
  padding: 5px 10px;
  background-color: #fa0;
}

結果畫面

https://ithelp.ithome.com.tw/upload/images/20200928/20112550BNtDwr7MOY.png

是不是非常簡單!是不是非常單純!是不是覺得比 font-size 設定為 0 更省事呢(笑)

其實要消除 inline-block 之間的空間有至少5種方式,這只是其中一種作法罷了,至於到底要用哪種方式,就看各位自己的決定了,方法太多的時候,偶爾用擲筊來決定用哪種方式,也不失為一個增進開發情趣的方式喔(大誤)


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Direction- 金魚都能懂的CSS必學屬性
下一篇
Font- 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言