每天学习一点点--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 ...
随机推荐
- 解决Gradle生成Eclipse支持后，发布到Tomcat丢失依赖jar包的问题
最近一个项目中,使用号称下一代构建工具的Gradle构建项目. 使用中发现一个问题,Gradle从中央库下载的jar文件在系统的其它目录,使用gradle eclipse添加Eclipse支持时,ja ...
- Java EE : 二、图解 Cookie（小甜饼）
目录 Java EE : 一.图解Http协议 Java EE : 二.图解 Cookie(小甜饼) Java EE : 三.图解Session(会话) 概述 一.概述 二.详细介绍Cookie 传输 ...
- F4搜索帮助 带回多个值
昨天群里有人问,就自己试了一下,POV执行在走PAI之前,所以空表行的时候TABLE里是没有数据的,所以一开始想用MIDOFY的想法看来不完善,可以再空表时做个APPEND. 后来又换了个想法,直 ...
- Redis一个异常的解决办法，异常描述：Could not get a resource from the pool
异常描述: redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the poo ...
- YY前端课1
1. HTML页面主要由声明.头部.主体三部分构成. 2. 头部及其meta标签,以及主体的title标签很重要,对SEO.搜索优化等很重要. 3. 常用的charset编码格式有2种,一种是utf- ...
- Windows 10系统更换Windows 7系统磁盘分区注意事项二
1.在原WIN10系统中将硬盘的GPT分区表格式转换为MBR分区表格式 上一篇关于新机预装WIN10系统更换为WIN7系统中说到需要将硬盘的GPT分区表格式转换为MBR分区表格式,在文章末尾给出的链接 ...
- golang mgo的mongo连接池设置：必须手动加上maxPoolSize
本司礼物系统使用了golang的 mongo库 mgo,中间踩了一些坑,总结下避免大家再踩坑 golang的mgo库说明里是说明了开启连接复用的,但观察实验发现,这并没有根本实现连接的控制,连接复用仅 ...
- Python函数式编程学习笔记
High order function map(f,Iterable),将f依次作用在Iterable的每个元素然后返回一个Iterator,再用list(map(f,Iterable))进行转换得到 ...
- js控制键盘只能输入数字和退格键，delete键
function numbText(e){ if(e&& e.stopPropagation){ code= e.which; }else{ code= window.event.ke ...
- reversing-Easy Crack
Easy Crack 程序启动后输入任意字符会显示一个MessageBox的Incorrect Password. 打开OllyDbg,载入程序后查找到目标字符串Incorrect Password, ...