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箇中文）