css强制换行 禁止换行 的几种写法

一，强制不换行，禁止换行

div {
    white-space:nowrap;
}

二，自动换行

div{
    word-wrap: break-word;
    word-break: normal;
}

三，强制英文单词切断换行

1,只对英文起作用，以字母作为换行依据。

div{
    word-break: break-all;
}

其他强制换行选项：

div{
    word-wrap: break-word; /*只对英文起作用，以单词作为换行依据。*/
    white-space: pre-wrap; /*只对中文起作用，强制换行。*/
}

四，禁止换行

1,禁止换行，超出后显示...

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

2，强制2行显示，超出后显示....（都行文本省略号）

div {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

注意：这里display不可用flex,等其他值，多行文本省略号，只有-webkit-支持。