每天学习一点点--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 ...
随机推荐
- [HTML/HTML5]6 使用图像
6.1 将图像作为Web页面的前景元素 使用img元素,就可以在Web页面中添加图像.img是image的缩写.只需在img元素中添加src(source的缩写)属性,并为该属性设置相应的值,就可以 ...
- MySQL之远程登录配置
1.注释掉mysql配置文件中的这一行:#bind-address = 127.0.0.1 2.给指定服务器的用户授权:GRANT ALL PRIVILEGES ON *.* TO root@&qu ...
- Microsoft Office Project 相关教程 收集
Project教程 如何建立任务间链接 Project教程:[10]如何将项目插入主项目 如何有效使用Project(1)——编制进度计划.保存基准 如何有效使用Project(2)——进度计划的执行 ...
- 【转】一种解决h5页面背景音乐不能自动播放的方案
原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...
- rtc关机闹钟2 Alarm manager
public void set(int type, long triggerAtMillis, long windowMillis, long intervalMillis, PendingInten ...
- PHP语言基础简单整理
1.开始结束标记<? ... ?> 2.定义变量:$变量名 例: $str="锦清笋";不需要指明数据类型 3.输出语句:(1)echo "hello wor ...
- ssh框架文件上传下载
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android studio 提示：Can't use Subversion command line client: svn Probably the path to Subversion executable is wrong. Fix it.
1.参考来源:http://my.oschina.net/fyyy/blog/519353 按照下图,svn相关选项不要选.
- javadoc 生成自定义的标签
转自:http://www.blogjava.net/lishunli/archive/2010/01/12/309218.html Technorati 标记: tools 关键词 个性化地生成Ja ...
- http——tinyhttp分析
1.前言: 1)tinyhttpd是一个500行+的http服务器 2)支持迭代和多线程并发两种服务器模型 3)支持GET和POST方法 4)支持CGI(fork.execl方式) 5)虽然响应的ht ...