iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0

大家好 /images/emoticon/emoticon37.gif

今天要用 css 作內文的排列


內文的排列
在遇到邊框後的斷行
下面先作不換行

p{
  white-space: nowrap;
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496VN2Hb7KO7Q.jpg
這會使文章不斷行而且會超出格子框
所以有個方式在碰到邊框後切斷
並留下 " ... " 的方法

p{
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496Hm507nnWsz.jpg
就是像這樣


下面是遇到內文需要換行時

p{
  word-break: normal;
  word-break: break-all;
  word-break: keep-all;
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496YlNR80grgv.jpg
normal 預設單字碰到邊框換下一行
https://ithelp.ithome.com.tw/upload/images/20180103/20107496lIZzVdZHKb.jpg
break-all 遇到英文單字會直接切斷換行
https://ithelp.ithome.com.tw/upload/images/20180103/20107496j4Sk0BWwEF.jpg
keep-all 用在英文是和 normal 是一樣
因為這是用在亞洲文字的斷行規則
所以換成中文就像下圖
https://ithelp.ithome.com.tw/upload/images/20180103/201074960WbhbWJy9q.jpg


只有編排文章似乎滿一般的
所以也來改變英文字的大小寫
用 text-transform 轉大小寫

p{
text-transform: capitalize; /* 單字第一字大寫 */
text-transform: uppercase; /* 全部大寫 */
text-transform: lowercase; /* 全部小寫 */
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496X1i8tJ7xX3.jpg


要整段文章全部大寫外
原本大寫會比小寫的字級數更大

font-variant: normal; /* 預設正常字級數 */
font-variant: small-caps; /* 大寫比小寫大字 */

https://ithelp.ithome.com.tw/upload/images/20180103/20107496zuTCHjoNF6.jpg
以 Markdown 為例


改變書寫方向

p{
  direction: rtl; 
}

direction 值為
預設 ltr 從左至右書寫
和 rtl 從右至左書寫
https://ithelp.ithome.com.tw/upload/images/20180103/20107496AABEHx7bDc.jpg
看起來是和 text-align 的作用差不多
但和下面的 unicode-bidi 屬性一起使用就不一樣了


把字從右至左排列
屬性 unicode-bidi 的值有 normal、bidi-override、plaintext
下面寫法以 bidi-override 為例

p{
  direction: rtl; 
  unicode-bidi: bidi-override;
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496a6j8bZWbBn.jpg
bidi-override 值會打散單字
不只單字連英文字也是從右至左排列
在中文字也適用
plaintext 就會直接作為純文字呈現


若是條列、格子要作到間隔上色時
以 LI 為例

li:nth-child(odd) {
  background: #CFD8DC;
}
li:nth-child(even) {
  background: #fff;
    }

:nth-child(odd) 為單數列、格增加屬性
:nth-child(even) 雙數列、格增加屬性
https://ithelp.ithome.com.tw/upload/images/20180103/20107496rJRobrTosg.jpg


最後還發現了可以跟著換行的外框

.clone{
    box-decoration-break: clone;
}

https://ithelp.ithome.com.tw/upload/images/20180103/201074969Iyr99kjfJ.jpg
上面換行是用

<br>

為了區分 clone 和 slice 的不同
所以加了 border-radius 外框

.slice{
    box-decoration-break: slice;
}

https://ithelp.ithome.com.tw/upload/images/20180103/20107496drjVb6bByI.jpg

box-decoration-break 參考資料
https://www.w3schools.com/cssref/css3_pr_box-decoration-break.asp
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-decoration-break

--- 明日待續。


上一篇
CSS:table 表格
下一篇
CSS:改變 input 外框
系列文
自我挑戰日記30

尚未有邦友留言

立即登入留言