前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >word-wrap: break-word和word-break: break-all区别

word-wrap: break-word和word-break: break-all区别

作者头像
javascript.shop
发布2019-09-04 16:12:27
1.1K0
发布2019-09-04 16:12:27
举报
文章被收录于专栏:杰的记事本

相信大家对断句换行都有一点了解,也许也有部分人连这个属性是什么都不知道。当然了,如果是IT这个专业相关的大佬们可以不用看了,这篇文章主要针对于自学前端和转行的朋友们。

案例

代码语言:javascript
复制
p{
    width: 200px;
    height: 200px;
    background: #ccc;
}

尴尬的效果图

  不知道有没有人遇到过这种情况,如果遇到了,是否看起来很蛋疼?答案是肯定的,那么我们肯定希望他换行呀~,所以我们的word-wrap: break-word的存在就有意义了!效果如下:

代码语言:javascript
复制
p{
    width: 200px;
    height: 200px;
    background: #ccc;
    word-wrap: break-word;
}

word-wrap: break-word效果图

  可以看到,终于让那个单词换行了,但是我们还发现这个问题,好多行后面都有一大片空白被浪费了,看起来觉得很不爽,如下图所示:

尴尬的效果图

那我们怎么搞到这种强迫症患者绝对不能容忍的问题呢?接下来我们的word-break: break-all的存在就有意义了,效果如下:

代码语言:javascript
复制
p{
    width: 200px;
    height: 200px;
    background: #ccc;
    word-break: break-all;
}

完美效果图

  好了,这样子看起来舒服多了,但是对于一个单词就是要一行看完,就不喜欢一个单词换两行的朋友,就可以不用word-break: break-all了,毕竟这个属性,我也基本不用,一般用word-wrap: break-word就差不多了

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015年11月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档