css 文字超出部分自动加省略号

在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号。
用到的属性有

  • text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/
  • word-break: break-all; /允许在单词内换行/
  • white-space: nowrap; /不换行 控制单行文本/

.a{
    width: 300px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden; 
    
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;	/*控制文字行数*/
    height: 50px;	/*控制div的高度*/
    
}

.b{
    width: 300px;
    word-break: break-all;  /*允许在单词内换行*/
    text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
    overflow: hidden;
    white-space: nowrap;/*不换行 控制单行文本*/
}

你可能感兴趣的:(css)