【CSS3】CSS3文本换行word-wrap解决英文文本超过固定宽度不换行-文本换行--word-wrap-不换行

本文所分享的知识点是【CSS3文本换行word-wrap解决英文文本超过固定宽度不换行】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。

CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来接近完美。当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。

一、word-wrap的语法

1、语法

复制代码

代码如下:

word-wrap ： normal || break-word

2、取之说明
(1)normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器);
(2)break-word将内容在边界内换行

二、word-wrap的兼容情况
 

三、word-wrap的实例

CSS代码：

复制代码

代码如下:

div {width:300px;height:200px;border:1px solid #ccc;word-wrap:break-word;}

HTML代码：

复制代码

代码如下:

<div>menglongxiaozhan menglongxiaozhan 梦龙小站 menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiao
zhan menglongxiaozhan menglongxiaozhanmenglongxiaozhanmenglongxiaozhan menglongxiaozhan menglongxiaozhan</div>

预览效果：
 
CSS3之文本换行word-wrap就为大家介绍到这里，这个属性基本上兼容所有主流浏览器，是个不错的属性哟。更多CSS3属性方面的介绍，尽情关注本blog的更新。

关于CSS3文本换行word-wrap解决英文文本超过固定宽度不换行的相关讨论如下：

　　相关问题：div+css中..固定了宽度。在输入大量的英文时候时，...

　　答：css强制换行、强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-break: normal; } css强制英文单词断行 div{word-break:break-all;} 看看能用得到不 >>详细

　　相关问题：为什么我给DIV设置了宽度，但是我在里面输入英文它...

　　答：这种情况我也碰到过，你只要每个英文单词有空格隔开就没事了，要是英文全都连在一起就不行。不过一般都没有这种情况。 >>详细

　　相关问题：html div中文本超过div宽度怎么不自动换行了而是显...

　　答：你可以看看这个网址 ++++ http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html ++++ 对你应该有帮助，div里面一般情况下不要直接写文字，你可以添加一个P标签或者H1标签或者其他的。 >>详细