每天学习一点点--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 ...
随机推荐
- js中this的使用
this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, function test(){ this.x = 1; } 随着函数使用场合的 ...
- 前端常用的几个js判断（二）
10.鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 ...
- struts2+spring+hibernte整合示例
简单实现添加用户功能,仅供初学者参考,可自行扩展程序功能(增删改查). 这里贴下代码,需要的可以下载看(因为比较懒). applicationContext.xml <?xml version= ...
- ubuntu - 中文
首先要从Ubuntu语言设置那里,把中文语言包安装上 打开/etc/environment 在下面添加如下两行 LANG="zh_CN.UTF-8″ LANGUAGE="zh_CN ...
- 【PCB】扫盲总结
1.PCB是什么 PCB( Printed Circuit Board),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连接的载体.由于它是采用电子印刷 ...
- 第五次Java作业
作业一: 文件显示列表框. 增加了下拉式组合框,text区域设置颜色为红色. import javax.swing.*; import java.awt.*; import java.io.File; ...
- 基于内存，redis，mysql的高速游戏数据服务器设计架构
转载请注明出处,欢迎大家批评指正 1.数据服务器详细设计 数据服务器在设计上采用三个层次的数据同步,实现玩家数据的高速获取和修改. 数据层次上分为:内存数据,redis数据,mysql数据 设计目的: ...
- java开发连接Oracle 12c采用PDB遇到问题记录
今天初次使用java连接Oracle 12c,遇到各种问题,为方便后续查询,在汇总了问题记录及解决方案如下. ORA-28040: No matching authentication protoco ...
- win10 Unistack 服务组 占用资源如何解决
开始菜单>设置>隐私,隐私界面的左侧栏目,找最后一个“后台应用”,把后台运行的应用全部关掉即可
- 初探bootstarp
目录1.下载Bootstrap2.引入Bootstrap相关的css.js3.一个最简单的Bootstrap页面4.浏览器支持 1.下载BootstrapBootstrap官网下载地址Bootstra ...