全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

深入了解word-break和 word-wrap的区别

发布时间:2022-06-02 14:21:00
发布人:wjy

我们知道,本次内容主要是“深入了解 word-break:break-all和 word-wrap:break-word的区别”,这2个属性都是属于CSS3的属性,在现在很多文本模块用到很多,故此写了这篇文章,和大家交流学习。首先我们来了解一下word-break这个属性,它的语法如下:

深入了解word-break和 word-wrap的区别

```text
word-break: normal;
word-break: break-all;
word-break : keep-all;
```

它的属性值一共有3个,其中的几个属性值的含义具体解释如下:

normal:表示默认值,即默认的的换行规则。 break-all:表示强行换行,意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行,但不允许文本中的单词换行,只能在半角空格或连字符处换行。

其中,在这三个属性值中,break-all这个属性值是所有浏览器都支持,但是 keep-all就不这样了,虽然有一定的发展和进步,但目前移动端还不适合使用word-break : keep-all。

好了,现在来说说另外一个主角——word-wrap来了,其语法如下:

```text
word-wrap : normal;
word-wrap: break-word;
```

其中的几个属性值的含义具体解释如下: normal:就是默认值,就是正常的换行规则。 break-word:表示一行单词中实在没有其他靠谱的换行点的时候才进行换行。

其实大家会发现,word-break和word-wrap其实是长得比较像的,而且属性值也有类似之处,其实word-wrap属性也是很有故事的,它之前由于和 word-break长得太像,难免会让人记不住或搞混,所以在CSS3规范里,这个属性的名称被修改了,叫作 overflow-wrap。虽然这个新属性名称改了下,显得语义更准确,但也更容易区别和记忆。另外,在 Chrome和 Safari等WebKit内核的浏览器仅支持这个新属性。因此,虽然换了个好看好用的新名字,但是为了兼容性,目前还是乖乖地使用word-wrap 吧。

下面继续来唠唠这连个属性的到底有啥区别呢?word-break: break-all和 word-wrap: break-word。首先,两者长相神似,都有 word,都有break,位置都还一样,一个有两个break,一个有两个word;其次,两者的功能作用也类似,这两个声明都能使连续英文字符换行,那么它们的区别到底是什么? 下面给大家举个例子说明一下:dsdfsfdsfsf

代码展示1:

```text
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: orange;
        margin: 100px auto;
        padding: 20px;
        word-break: break-all;
    }
</style>
<body>
    <div class="box">最近有没有好听的音乐推荐的?比如我有一首可以推荐的,可以取QQ音乐搜索或者访问地址:https://aixuxu.com/index/aixuxu.mp3。</div>
</body>
```

 

代码展示2:

```text
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: orange;
        margin: 100px auto;
        padding: 20px;
        word-wrap: break-word;
    }
</style>
<body>
    <div class="box">最近有没有好听的音乐推荐的?比如我有一首可以推荐的,可以取QQ音乐搜索或者访问地址:https://aixuxu.com/index/aixuxu.mp3。
    </div>
</body>
```

 

综上所述,word-break: break-all;的作用是所有的都换行,很霸道的那种,毫不留情,一点儿空隙都不放过的那种换行,而 word-wrap:break-word则稍微温柔点儿,带有一点怜悯之心,如果这一行文字有可以换行的点,如空格之类的,就不打英文单词或字符的主意了,在这些换行点换行,至于对不对齐、好不好看则不关心,因此,很容易出现一片一片空白区域的情况。

这就是这两个声明的区别所在。此文章供大家交流学习,文章在内容上有参考《CSS世界-张鑫旭》一书的灵感,欢迎大家交流讨论。更多关于“web前端培训”的问题,欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验,课程大纲更科学更专业,有针对零基础的就业班,有针对想提升技术的提升班,高品质课程助理你实现梦想。

相关文章

企业号可以开通抖音小店吗

企业号可以开通抖音小店吗

2023-10-08
抖音小店怎样绑定多个店铺账号

抖音小店怎样绑定多个店铺账号

2023-10-08
抖音小店运营做什么的

抖音小店运营做什么的

2023-10-08
抖音小店怎么样才有达人标签呢

抖音小店怎么样才有达人标签呢

2023-10-08

最新文章

上海物联网培训一般费用多少

上海物联网培训一般费用多少

2023-09-12
北京物联网培训费用大概多少

北京物联网培训费用大概多少

2023-09-12
北京物联网培训需要费用高不高

北京物联网培训需要费用高不高

2023-09-12
上海效果好的物联网培训费用高吗

上海效果好的物联网培训费用高吗

2023-09-12
在线咨询 免费试学 教程领取