每天学习一点点--word-break和word-wrap用法和区别
有时候一个又臭又长的单词出现在一个并不宽到足以容纳这个单词时会出现内容溢出容器这种情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: skyblue;
}
div{
width: 150px;
background: #ccc;
}
</style>
</head>
<body>
<div>
this is a long worddddddddddddddddddddddddddddddddddddddddddddd.
</div>
</body>
</html>
我们在代码里加入一行代码：word-wrap:break-word;
div{
width: 150px;
background: #ccc;
word-wrap:break-word;
}
我们会发现那个长长的单词被断开使其不溢出容器。
这就是word-wrap:break-word的作用，首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；我们会发现long单词后面还有一些浪费的空间，这是你如果不想浪费这些空间，word-break:break-all;就发挥作用了；我们修改一下div的CSS：
div{
width: 150px;
background: #ccc;
word-break: break-all;
}
word-break:break-all;则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
小结：word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
word-wrap: normal | break-word; word-break: normal | keep-all(不允许断开) | break-all;
更加详细的分析请看：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
每天学习一点点--word-break和word-wrap用法和区别的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- 【Word Break II】cpp
题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...
- 【LeetCode】139. Word Break 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- [LeetCode] Word Break II 拆分词句之二
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- 【leetcode】Word Break II
Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...
- 17. Word Break && Word Break II
Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...
- LeetCode:Word Break II（DP）
题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...
- LeetCode Word Break II
原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words ...
- 【LeetCode OJ】Word Break II
Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...
- Leetcode#139 Word Break
原题地址 与Word Break II(参见这篇文章)相比,只需要判断是否可行,不需要构造解,简单一些. 依然是动态规划. 代码: bool wordBreak(string s, unordered ...
随机推荐
- Oracle一个事务中的Insert和Update执行顺序
今天碰到了一个奇怪的问题,是关于Oracle一个事务中的Insert和Update语句的执行顺序的问题. 首先详细说明下整个过程: 有三张表:A,B,C,Java代码中有一段代码是先在表A中插入一条数 ...
- sqlserver 事务日志过大 收缩方法解决方案
sqlserver 事务日志过大,可能会导致备份失败或者数据库出现异常,所以要定期清除sqlserver 事务日志 建议:为了防止日志文件无限扩大,可以对日志文件作一些限制. 清除sqlserver事 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- c# 打乱数组
有时候得到了一个List,我想把它随机排列一下顺序.而且如果针对不同类型的List都能用,就要用到泛型. 其实思想很简单,就是从原List中每次随机取一项,添加到新的List中,并在原List中删除. ...
- LR手动关联新手总结
最近学习LoadRunner的时候深刻体会:新手入门真心不容易啊 今天一直在纠结LoadRunner的手动关联问题,之前刚开始看书的时候就看到了,不过当时想先放放,后面来细细研究, 今天看的时候在网上 ...
- Spring AOP基本概念
Spring AOP基本概念 目录 Spring AOP定义 AOP基本术语 通知类型 AOP定义 AOP基本术语 切面( Aspect ):一个能横切多个对象的模块化的关注点.对Spring AOP ...
- SQL Server 2012提供的OFFSET/FETCH NEXT与Row_Number()对比测试 [T]
SQL Server 2008中SQL应用系列--目录索引 前些天看到一篇文章<SQL Server 2012 - Server side paging demo using OFFSET/FE ...
- struts文件上传、文件下载
文件上传 如果在表单中上传文件,表单的enctype属性为multipart/form-data struts默认上传文件大小为2M,如果需要修改,在配置文件中设置 <constant name ...
- 仓储管理系统500bug记录一下mysql 8小时超时解决办法
HTTP Status 500 - Request processing failed; nested exception is org.springframework.dao.TransientDa ...
- storyboard简单认识
## storyboard文件的认识 - 作用:描述软件界面 - 程序启动的简单过程 - 程序一启动,就会加载`Main.storyboard`文件 - 会创建箭头所指的控制器,并且显示控制器所管理的 ...