[分享]css两行不换行

在CSS中，有时我们需要在一个元素中显示一行较长的文本，但我们希望文本不会自动折行。这时，我们可以使用"whitespace"属性。p { whitespace: nowrap; ...

在CSS中，有时我们需要在一个元素中显示一行较长的文本，但我们希望文本不会自动折行。这时，我们可以使用"white-space"属性。

p {
    white-space: nowrap;
} 

这样设置后，文本就不会换行了。如果文本过长，它会超出边界。这种情况下，我们可以使用"overflow"属性，来控制文本的行为。

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

这个设置会将文本截断，并在结尾处添加省略号。如果我们想要在换行前插入分隔符，该怎么办呢？我们可以使用“word-break”属性。

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
} 

这个设置将允许文本在单词之间自动换行，并在需要时断开非单词性的字符串。