[分享]css3整个单词换行

CSS3整个单词换行的实现方法 在CSS3中，采用了一个新的属性wordwrap，可以实现整个单词的换行，而不是单独一个字母的换行。使用wordwrap属性时，可以设置normal或breakword...

CSS3整个单词换行的实现方法
在CSS3中，采用了一个新的属性word-wrap，可以实现整个单词的换行，而不是单独一个字母的换行。使用word-wrap属性时，可以设置normal或break-word，其中normal是默认值，表示不强制进行换行，而break-word表示在必要时强制整个单词进行换行。
下面是使用CSS3的word-wrap属性实现整个单词换行的代码示例：

  p{
            word-wrap: break-word;
        } 

例如，我们有一段长的单词，如果我们不设置word-wrap属性，那么它将会超出容器的范围而不自动换行。如下所示：

  <div style="width: 200px; border: 1px solid #ccc;">
            <p>Thisismylongwordthatneedstobrokeninthemiddleoftheword.</p>
        </div> 

我们可以添加CSS3中的word-wrap属性，像下面这样：

  <div style="width: 200px; border: 1px solid #ccc;">
            <p style="word-wrap: break-word;">Thisismylongwordthatneedstobrokeninthemiddleoftheword.</p>
        </div> 

这时我们会发现单词已经被正确地进行了换行，而不是像之前那样超出容器的范围。
总结
使用CSS3中的word-wrap属性能够很方便地实现整个单词的换行，避免长单词被截断或超出容器的范围。同时，我们可以通过设置normal或break-word来调整我们想要的单词换行方式。