word-wrap 在边界内换行

最新推荐文章于 2024-08-30 07:20:49 发布

原创最新推荐文章于 2024-08-30 07:20:49 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS样式属性word-wrap的用法，包括其正常模式和break-word模式的区别，以及不同浏览器的兼容性情况。通过示例代码展示了如何在特定容器中控制文本的换行行为。

语法：

word-wrap ： normal | break-word

取值：

normal：

控制连续文本换行。

break-word：

内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

说明：

设置或检索当当前行超过指定容器的边界时是否断开转行。
1. 设置或检索当当前行超过指定容器的边界时是否断开转行。
兼容性：

类型 Internet Explorer Firefox Chrome Opera Safari
版本 (√)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.1
(√)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x
(√)Safari 4
(√)IE8 (√)Firefox 3.5

示例：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(√)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(×)Opera 9.63	(√)Safari 3.1
(√)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4
(√)IE8	(√)Firefox 3.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>word-wrap</title>
</head>
<body>

<style type="text/css">
    div{ width:300px;word-wrap:break-word;border:1px solid #999999;}
</style>
<div>
    wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
    </div>
</body>
</html>