css中经遇到的文本换行问题

单行、多行溢出省略

1.单行省略

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

2.多行省略

.texts {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;   /*数字代表显示的行数*/ 
    -webkit-box-orient: vertical;
    }

css文本、字母、数字过长 自动换行处理

1. 以单词作为换行依据  
    word-wrap: break-word;  
    word-break: normal;
  
2. 以字母作为换行依据 
word-break: break-all;  

3.强制不换行
div{ white-space:nowrap; }

 七微月ok

HTML中     等3种空白空格的区别

 (不断行半角空格) 
 (半角空格,1/2个中文)
 (全角空格,1个中文)

相关推荐