css两行不换行

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,有时我们需要在一个元素中显示一行较长的文本,但我们希望文本不会自动折行。这时,我们可以使用 white-space 属性。p { white-space: 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;
} 

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行不换行

粉丝

0

关注

0

收藏

0

已有0次打赏