CSS: 通過CSS控制字串長度（一行或者多行）

白白白發表於2018-11-19
CSS字串
  • 一行時，超出長度的部分變為省略號
.text-hidden {
  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

注：通過width來控制字串長度

  • 多行時，在第n行超出的部分變為省略號
.text-ellipsis {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

注：通過-webkit-line-clamp來控制你要在第幾行省略。預設編譯的時候，-webkit-box-orient: vertical;會被過濾，通過以上註釋的寫法才可生效，或者在react專案中，在對應需要加樣式的地方新增style屬性：style={{WebkitBoxOrient: “vertical”}}也可生效

相關文章