CSS解決中英文的換行、不換行、超出後顯示省略號的問題

white-space:nowrap;         //強制不換行（中英文都起作用）
white-space:pre-wrap;       //只對中文起作用，強制換行
word-break:break-all;        // 只對英文起作用，以字母作為依據，強制換行
word-break:break-word;    //只對英文起作用，以單詞作為依據，強制換行
overflow:hidden;               //超出的內容隱藏
text-overflow:ellipsis;        //超出的內容為省略號
實例1：不換行，超出的內容設置成省略號（中英文）

white-space:nowrap; //強制換行（中英文有效）




overflow:hidden; //隱藏超出的內容
text-overflow:ellipsis; //超出的內容設置成省略號

實例2：強制換行，英文以字母為換行依據，超出的內容設置成省略號

white-space: pre-wrap; //中文換行
word-break:break-all; //英文換行，以字母為依據
overflow:hidden; //隱藏超出的內容
text-overflow:ellipsis; //超出的內容設置成省略號

實例3：強制換行，英文以單詞為換行依據，超出的內容設置成省略號

white-space:pre-wrap; //中文換行
word-break:break-word; //英文換行，以單詞為依據
overflow:hidden; //隱藏超出部分內容
text-overflow:ellipsis; //超出部分設置成省略號

類似文章：CSS3指定內容以多少行顯示，超出部分顯示省略號
（完）