文本超出隐藏及自动换行

1.单行文本超出隐藏显示省略号

.single-line-text {
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    white-space: nowrap; /* 禁止文本换行 */
}

2.多行文本超出显示省略号

.multi-line-box {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 1;
  // /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

 

2.文字自动换行

// 不允许文字换行
white-space:nowrap
// 英文、数字，自适应换行
word-break: break-all;
// 强制换行（适用于全英文和符号的句子）
// 解释：使用break-word时，是将强制换行，兼容各版本IE浏览器，兼容谷歌浏览器
word-wrap:break-word