每天学习一点点--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 ...
随机推荐
- 即时聊天IM之一 XMPP协议简述
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com 综述: ...
- find / -type f -name "*fetion*" |xargs rm -rf {}\
find / -type f -name "*fetion*" |xargs rm -rf {}\
- 数组中的toString，toLocalString，valueOf方法有什么区别
1. 2.简单来说,tostring就是用字符串来代替对象.tolocalstring就是根据不同的语言环境吧对象转成字符串,实际上totolocalstring是有缺省参数的,如tolocalstr ...
- jfinal基本应用 --报主键重复
在使用jfinal 的Model过程中有一个很怪异的问题,发布到服务器上,只要是往表中添加字段,就报主键重复. 1.我添加表的时候调用了 public void create(Map map){ St ...
- eclipse导入外部jar包
首先在项目下创建一个文件夹,保存我们的jar包. 在项目名上右击,依次点击[New]-->[Floder],打开新建文件夹窗口输入文件夹名称[lib],点击[ok].我们通常在lib文件夹中存放 ...
- 一个比较通用的makefile
.PHONY : all clean DEBUG := YES CC := gcc CXX := g++ LD := g++ AR := ar rc HOME_PATH := $(realpath . ...
- Excel表格导入数据
步骤: 1,选择要插入的数据库--右键--任务--导入数据 2,点击下一步,选择数据源,excel文件路径,和版本信息(注:使用2010及以上版本的office,请先将格式转换为03 或07格式的以便 ...
- 第十讲（LINQ）
一..LINQ查询 例如: static void LINQQuery() { var query = from r in Formula1.GetChampions() where r.Countr ...
- Javascript下拉导航
1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...
- Haskell Types与Typeclasses
可使用 :t 命令检测表达式类型. 明确的类型首字母必大写. 一.Types Char Bool Int(有界,与Integer类型对比效率高) Integer(无界,与Int类型对比效率低) Flo ...