终于明白word-break属性——break-all和break-word的区别
2024-10-15 11:35:23
其实一直不明白,也没有认真去想过 word-break 属性的 break-all 和 break-word 有什么区别
后来看了一个大神写的一篇博客,写得很详细,看了豁然开朗。
所以,我也就不在过多赘述,直接上demo,最后会附上原文链接
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.div01,.div02 {
width: 300px;
}
.div01 {
word-break: break-all;
}
.div02 {
word-break: break-word;
}
</style>
</head>
<body>
<div class="div01">show me the money give me the money</div>
<div class="div02">show me the money give me the money </div>
</body>
</html>
下面截图是上面demo的运行结果
第一行的英文使用了:word-break: break-all;
第二行的英文使用了:word-break: break-word;
共同点:
都是可以对英文单词进行断句换行
不同点:
word-break:break-all 紧接着前面的单词,并强行断句换行(比如上面截图中的 money 是紧跟着前面的 the)
word-break:break-word 不会紧接着前面的单词,而是整个单词直接另起一行 (比如上面截图中的 money,没有紧跟前面的 the,直接换行)
注:word-break上面的2个属性不仅适用于英文单词,还适用于数字;
原文链接:https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
最新文章
- 【dom4j xml】使用dom4j处理XML文件--测试过程遇到的问题
- Apache多站点配置(ubuntu)
- codevs 1229 数字游戏(可重集的全排列)
- sql读取xml
- Eclipse下设置github开发环境
- ExtJS4 动态加载
- CentOS 安装easy_install、pip的方法
- Selenium关于Page Objects
- 小试牛刀JavaScript鼠标事件
- poj 2774 最长公共子串 后缀数组
- EBS业务学习之库存管理
- 设计模式学习之访问者模式(Visitor,行为型模式)(21)
- 命令行编译多个java文件
- BZOJ4858 : [Jsoi2016]炸弹攻击 2
- Windows下使用VS2017搭建FLTK开发环境
- 《Linux内核设计与实现》读书笔记 18
- [RequireComponent(typeof(....))]
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记四之铭文升级版
- create view in view
- easyui ---- jEasyUI-定制提示信息面板组件
热门文章
- Spring bean的生命流程
- java 日志体系目录
- 博客七----tensorflow-gpu安装满满填坑
- java 多线程的唤醒
- 【NIFI】 Apache NiFI 使用技巧
- CPDA-战略管理
- python第三天基础之字符编码
- Error creating bean with name &#39;student&#39;: Unsatisfied dependency expressed through field &#39;teacher&#39;; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating
- windowsSevice程序和topshelf程序创建服务对比
- jenkins maven git windows code 自动部署