利用CSS3 word-break 属性实现文字强制换行效果

最新推荐文章于 2025-04-08 16:56:54 发布

前端独秀

最新推荐文章于 2025-04-08 16:56:54 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j12hahk1j&title=%E5%88%A9%E7%94%A8CSS3+word-break+%E5%B1%9E%E6%80%A7%E5%AE%9E%E7%8E%B0%E6%96%87%E5%AD%97%E5%BC%BA%E5%88%B6%E6%8D%A2%E8%A1%8C%E6%95%88%E6%9E%9C

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍CSS中word-break属性的使用方法，包括normal、break-all和keep-all三个值的作用，以及如何在不同浏览器中实现自动换行，特别关注在长单词或URL的断字处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

实例：

<!DOCTYPE html>

<html>

<head>

<style>

p.test1

{

width:11em;

border:1px solid #000000;

word-break:hyphenate;

}

p.test2

{

width:11em;

border:1px solid #000000;

word-break:break-all;

}

</style>

</head>

<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>

</html>

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 word-break 属性。

定义和用法

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordBreak="keep-all"

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。