回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

css文本超出隐藏显示省略号 #48

Anuluca Date : 2020-09-24 Tags : 2

❗️ 此笔记写于2020年，请注意实效性

隐藏一行（通用）

实现方法：

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

效果：

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带…

自定义隐藏行数（只适用于webkit内核）

实现方法：

div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  //要隐藏的行数
  overflow: hidden;
}

效果：

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家…

自定义隐藏行数（通用）

实现方法：

p{
  position: relative; 
  line-height: 20px; 
  max-height: 40px;
  overflow: hidden;
  }
p::after{
  content: "..."; 
  position: absolute; 
  bottom: 0; 
  right: 0; 
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}