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;      //超出部分设置成省略号

(完)

猜你喜欢

转载自blog.csdn.net/Mr_JavaScript/article/details/82736303