搜尋
首頁web前端css教學letter-spacing和word-spacing有什麼差別

letter-spacing和word-spacing有什麼差別

Jun 19, 2017 pm 02:34 PM
letter-spacingword-spacing差別

語法: 
letter-spacing : normal | length 
參數: 
normal :  預設間隔
length :  由浮點數和單位識別碼組成的長度值,允許為負值。請參閱長度單位 
說明: 
檢索或設定物件中的文字之間的間隔。
屬性將指定的間隔加到每個文字之後,但最後一個字將被排除在外。 
對應的腳本特性為letterSpacing。請參閱我所寫的其他書目。
範例: 

div {letter-spacing:6px; } 
div {letter-spacing:0.5pt; }

letter-spacing和word-spacing有什麼差別

CSS中word-spacing屬性
1、檢索或設定物件中的單字之間插入的空格數。由浮點數和單位標識符組成的長度值,允許為負值。
2、預設值為 normal,等同於設定為0
3、CSS 把「字(word)」定義為任何非空白符字元組成的字串,並由某種空白字元包圍。這個定義沒有實際的語義,它只是假設一個文件包含由一個或多個空白字元包圍的字。支援 CSS 的用戶代理不一定能確定一個給定語言中哪些是合法的字,而哪些不是。儘管這個定義沒有太大價值,不過它意味著採用象形文字的語言或非羅馬書寫體往往無法指定字間隔。
4、利用這個屬性,可能會創建字間隔太寬的文檔,所以,使用 word-spacing 時要小心。

二、CSS中letter-spacing屬性
1、設定物件中的文字之間的間隔.每一個中文文字以及英文字母之間,都被隔開了所設定的距離,此屬性是控製字間距的.其屬性值是中英文都適用
2、預設值為normal,等同於設定為0
3、用letter-spacing 只對文字起作用對於圖片失效的
4、用letter-spacing 對漢字是以一個字進行間隔的對於英文是以一個字母進行間隔的

word-spacing 屬性增加或減少單字間的空白(即字間隔)。

letter-spacing 屬性增加或減少字元間的空白(字元間距)。

word-spacing(即字间隔):
This    is    some    text.    This    is    some    text.
This is some text. This is some text.
letter-spacing (字符间距):
T    h    i    s     i    s    h    e    a    d    e    r 4

以上是letter-spacing和word-spacing有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
CSS Flexbox與網格:全面評論CSS Flexbox與網格:全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求:1)Flexbox適用於一維佈局,如導航欄;2)Grid適合二維佈局,如雜誌式佈局。兩者在項目中可結合使用,提升佈局效果。

如何包括CSS文件:方法和最佳實踐如何包括CSS文件:方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件,如。 2.對於小型調整,可以使用內聯CSS,但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less,通過@import導入其他CSS文件。 4.為了性能,應合併CSS文件並使用CDN,同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid:我應該學習兩者嗎?Flexbox vs Grid:我應該學習兩者嗎?May 10, 2025 am 12:01 AM

是的,youshouldlearnbothflexboxandgrid.1)flexboxisidealforone-demensional,flexiblelayoutslikenavigationmenus.2)gridexcelstcelsintwo-dimensional,confffferDesignssignssuchasmagagazineLayouts.3)blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學(或我如何優化CSS KeyFrames動畫)軌道力學(或我如何優化CSS KeyFrames動畫)May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的?約翰·瑞亞(John Rhea)挑選了他寫的一個舊的CSS動畫,並介紹了優化它的思維過程。

CSS動畫:很難創建它們嗎?CSS動畫:很難創建它們嗎?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS:最常用的技巧@KeyFrames CSS:最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude:1)definingsmoothtransitionsbetnestates,2)使用AnimatingMultatingMultationMultationProperPertiessimultane,3)使用使用4)使用BombingeNtibalibility,4)使用CombanningWiThjavoFofofofoftofofo

CSS計數器:自動編號的綜合指南CSS計數器:自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1)他們可以使用forterablesofcontents,ListItems,and customnumbering.2)AdvancedsincludenestednumberingSystems.3)挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4)創造性

使用捲軸驅動動畫的現代滾動陰影使用捲軸驅動動畫的現代滾動陰影May 07, 2025 am 10:34 AM

使用滾動陰影,尤其是對於移動設備,是克里斯以前涵蓋的一個微妙的UX。傑夫(Geoff)涵蓋了一種使用動畫限制屬性的新方法。這是另一種方式。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器