css不换行

CSS文本换行与断行技巧：强制与自动处理

最新推荐文章于 2025-09-23 10:49:42 发布

转载最新推荐文章于 2025-09-23 10:49:42 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/arealy/p/7771315.html

文章标签：

#css

css 专栏收录该内容

29 篇文章

订阅专栏

本文探讨CSS中white-space属性的不同设置，包括nowrap防止换行、break-word自动换行和word-break英文单词断行。了解如何利用这些技巧来控制文本布局，提升网页设计灵活性。

// 强制不换行
p{
    white-space:nowrap;
}

// 自动换行
p{
    word-wrap: break-word;
    word-break: normal;
}

// 强制英文单词断行
p{
    word-break:break-all; //*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
 }

设置强行换行：

word-break:
normal ; //依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　//该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 


CSS设置不转行：
overflow:hidden; 隐藏
white-space：normal; 默认
pre; 换行和其他空白字符都将受到保护
nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象