Css显示三行,多出省略号

2021-03-23发布
|

显示一行:

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

显示三行

p{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;//显示几行
    -webkit-box-orient: vertical;
    word-break: break-all;//自动换行的处理方法
}

word-break 属性规定自动换行的处理方法:

  • normal:使用浏览器默认的换行规则
  • break-all:允许在单词内换行
  • keep-all:只能在半角空格或连字符处换行
------------ END ------------
© 2021 - 2023 Hexo @ Think . 豫ICP备17046389号-5