關於文字的設定太多了,一時間我不可能寫完整,加上我只紀錄常用到的部份,所以本帖也不可能齊全。
於是我想了想,把這篇改成隨增隨更型的帖子好了。
一樣,想到哪裡,碼到哪裡。
PS.本篇是文字,範例不少大段文字,內容我隨便打打不用認真。
✈ sup、sub(上標、下標)
▋文字上標:「標籤」 <sup> 文字上標</sup> ,「效果」文字上標
▋文字下標:「標籤」 <sub> 文字下標</sub> ,「效果」文字下標
▋文字下標:「標籤」 <sub> 文字下標</sub> ,「效果」文字下標
✈ letter-spacing(字元間距)
參數只有一個,letter-spacing:間隔距離值;(normal、inherit、自訂 N px或 N em)
▋字元像素px:letter-spacing:1px;字元間隔效果;letter-spacing:10px;字元間隔效果
▋字母寬度em:letter-spacing:0.1em;字元間隔效果;letter-spacing:1em;字元間隔效果
❆1em不一定就是16px,全看全篇網頁設定的值,若是設19px,1em即=19px;
▋字元像素px:letter-spacing:1px;字元間隔效果;letter-spacing:10px;字元間隔效果
▋字母寬度em:letter-spacing:0.1em;字元間隔效果;letter-spacing:1em;字元間隔效果
❆1em不一定就是16px,全看全篇網頁設定的值,若是設19px,1em即=19px;
✈ white-space(空白字元):段落換行
① Normal:預設值,遇連續空白會縮減成僅一個空白,字句若太長會自動分成兩行。
② Nowrap:遇連續空白縮減成一格,不換行。(用於適應區塊大小縮小文字)
③ Pre:保持原貌,縮成一行,即使超出界線也不變兩行
④ Pre-wrap:會分行,遇連續空白不縮減。
⑤ Pre-line:會分行,遇連續空白縮減成一格。
② Nowrap:遇連續空白縮減成一格,不換行。(用於適應區塊大小縮小文字)
③ Pre:保持原貌,縮成一行,即使超出界線也不變兩行
④ Pre-wrap:會分行,遇連續空白不縮減。
⑤ Pre-line:會分行,遇連續空白縮減成一格。
✈ word-wrap(句子換行):
四種屬性值:normal、break-word、initial、inherit,下列只說明較常用的break-word。
① Normal:預設值,長英文字串若超過區塊寬度會直接溢出。
② break-word:超過會折到第二行。
② break-word:超過會折到第二行。
normal:Default. Content exceeds the boundaries of its container.
break-word:Content wraps to next line, and a word-break occurs when necessary.
break-word:Content wraps to next line, and a word-break occurs when necessary.
✈ word-break(文字斷行):
五種屬性值:normal、break-all、keep-all、initial、inherit,下列只說明較常用的break-all、keep-all。
① keep-all:禁止單字斷開。
keep-all:Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean. from Microsoft > documentation > samples > word-break property
② break-all:中英文適用。允許從句子中的單字斷行,解決因半形字元而左右不齊行的英文句子。
break-all:Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text. from Microsoft > documentation > samples > word-break property
可用「-」(­)或「 」(​)斷行,從加入的地方切開,避免突兀。
讓 ㈠不句子溢出又能 ㈡齊行的語法:㈠ word-wrap:break-word; + ㈡ word-break:break-all;
✈ text-indent(文字縮排、凸排)
準備一個區塊(Div,作用=p,用於大段落),因為blogger打p會被自動切換成div,所以此處用div說明。
▋縮排範例:text-indent: 2 em; 被div包覆的每一段首行縮排兩個字的距離。
平行線永不相交。它可以是一項數學真理,也可以是一種令人無法逆轉勝的──平行空間。此時此刻,本該永不交會的兩個世界卻無從解釋的交疊,於是我認識了妳,妳知道我。我們熟悉,互相看得見,卻永遠碰觸不到彼此。
▋凸排範例:text-indent: - 2 em; 被div包覆的每一段首行突出兩個字的距離。
還有什麼比這還慘嗎?如果是隔著世界兩端的距離,我們可以用書信、電話、網路串連起無距離的國界,甚至能用視頻隨時看見彼此動態,有各式各樣的交通工具,想見一面就出發,只是碰到面的時間長短不同罷了。身處平行的我們卻面臨窮極一生的努力也無法碰觸彼此的窘迫處境,何其殘忍。
➥凸排要設內距或外距將整段拉右 2em ↥,為了和首行向左減去的距離(-2em)抵平,否則版面會跑位↴
還有什麼比這還慘嗎?如果是隔著世界兩端的距離,我們可以用書信、電話、網路串連起無距離的國界,甚至能用視頻隨時看見彼此動態,有各式各樣的交通工具,想見一面就出發,只是碰到面的時間長短不同罷了。身處平行的我們卻面臨窮極一生的努力也無法碰觸彼此的窘迫處境,何其殘忍。
0 Comments:
張貼留言