文本溢出+分隔線+其他

文本溢出顯示省略號+分隔線文字+其他

div自適應於瀏覽器高度

html,
body{
    height:100%;
    overflow:hidden;
}

然後div高度100%；

文本溢出顯示省略號

單行文本

overflow：hidden;
text-overflow:ellipisis;
white-space:nowrap;

多行文本

適用於webKit瀏覽器

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertial;

display:-webkit-box; 將對象作爲彈性伸縮盒模型顯示； -webkit-line-clamp:2;限制在塊元素內的文本行數； -webkit-box-orient:vertial;子元素的排列方式，豎版；

分隔線

 主要看了兩種思想 第一種單標籤實現，文字左右是兩個高度爲1px的div，div的寬度即爲分隔線的長度 第二種是通過相對定位移動文字的位置，並設置背景色遮擋住一部分分隔線，分隔線是邊框

詳細講解的鏈接：http://www.daqianduan.com/example?pid=4258

markdown怎樣插入代碼

···（tab上面的鍵） 代碼段 ··· 需要切換英文輸入法

在線預覽 https://catsbrother.github.io/ife2018/day12_15/index.html