『總結』CSS/CSS3常用樣式與web移動端資源

前端筆記屋發表於2017-09-08
CSSS3Web

css/css3常用樣式

強制文字顯示

單行顯示語法：white-space:nowrap;
讓一段文字在固定寬度在一行顯示，最後一個字元為省略標記(…)，css樣式如下

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

多行文字最後省略號：

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

這裡用到了文字溢位顯示省略號的，即設定溢位文字顯示為省略標記：

語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

  1. clip：表示直接裁切溢位的文字；

  2. ellipsis：表示文字溢位時，顯示省略標記(…)，省略標記代替最後一個字元；

  3. ellipsis-word：表示文字溢位時，也是顯示省略標記(…),不同的是，省略標記代替的是最後一個詞)

陸續新增用到的內容…

相關文章