css-单行与多行文本超出处理

盖码范

关注

阅读 58

2022-01-08

  1. 自动换行

    word-wrap:break-word;
    word-break:normal;
    
  2. 强制不换行

    white-space:nowrap;
    
  3. 强制英文单词换行

    word-break:break-all;
    
  4. 单行文本不换行多余文本显示省略号

    width:200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
  5. 多行溢出隐藏,显示省略号(IE浏览器不支持)

    word-break:break-all;
    display:-webkit-box;  // 对象作为伸缩盒子模型展示
    -webkit-box-orient:vertical;  // 设置或检索伸缩盒子对象的子元素的排列方式
    -webkit-line-clamp:3;  // 显示的行数 
    overflow:hidden;  // 隐藏超出的内容
    
    兼容浏览器的思路:可以通过js截取一定数量的字符串后,后面添加“...”
    

精彩评论(0)

0 0 举报