word-break、word-wrap和其他文字属性
word-break: break-all;
控制是否断词。(粗暴方式断词)
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
word-wrap: break-word;
控制是否换行。使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。
内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width 或 display:block 或 position:absolute。
两个声明语句十分容易混淆,如何记忆?
首字母走起:w-b:b-a 微博吧 , w-w:b-w 我王百万 。
效果比较:

图片来源:http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/
注: word-wrap:break-word 与 word-break:break-all 共同点是都能把长单词强行断句,不同点是word-wrap:break-word 会首先起一个新行来放置长单词,
新的行还是放不下这个长单词则会对长单词进行强制断句;而 word-break:break-all 则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。
其他文字处理样式:
white-space:nowrap; 用于处理元素内的空白,只在一行内显示。
overflow:hidden; 超出边界的部分隐藏。
text-overflow:ellipsis; 超出部分显示省略号。
参考:
http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/
http://jingyan.baidu.com/album/e75aca855b1500142edac6d0.html?picindex=2
word-break、word-wrap和其他文字属性的更多相关文章
- 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 && Word Break II
1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...
- LeetCode ||& Word Break && Word Break II(转)——动态规划
一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...
- leetcode@ [139/140] Word Break & Word Break II
https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- C# 给Word每一页设置不同文字水印
Word中设置水印时,可预设的文字或自定义文字设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以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 ...
- 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 ...
随机推荐
- 每天一个linux命令--more/less
最近小编在和第三方调试接口,只能查日志,查询除了tail,grep,cat,之外,还有 more.less,他们的优点在于可以翻页. more最基本的指令就是按空白键(space)就往下一页显示,按 ...
- ccc tiledmap
//移动方向枚举类 var MoveDirection = cc.Enum({ NONE: 0, UP: 1, DOWN: 2, LEFT: 3, RIGHT: 4 }); var minTilesC ...
- 被解放的GPU CSS3动画加速
概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...
- Visiual Studio2012 CLR20r3问题
看到有更新,习惯性的点了,升级到Visiual Studio Ultimate 2012 Update 1,并且按照提升重启了电脑.因为昨天太晚,也没验证.尽早打开VS,结果直接Crash.错误如下: ...
- 数论初步(费马小定理) - Happy 2004
Description Consider a positive integer X,and let S be the sum of all positive integer divisors of 2 ...
- c 语言结构体的三种定义方式
struct 结构体名{ 成员列表: ..... }结构体变量: 结构体类型变量的定义 结构体类型变量的定义与其它类型的变量的定义是一样的,但由于结构体类型需要针对问题事先自行定义,所以结构体 ...
- 【JAVA】通过公式字符串表达式计算值,网上的一种方法
public class Test { public static void main(String[] args) { SimpleCalculator s=new SimpleCal ...
- 期望dp BZOJ3450+BZOJ4318
BZOJ3450 概率期望DP f[i]表示到i的期望得分,g[i]表示到i的期望长度. 分三种情况转移: ① s[i]=‘x’:f[i]=f[i-1],g[i]=0 ② s[i]=‘o’:f[i]= ...
- OI刷题记录
从六月一号开始记录啦 6月1日 link-cut-tree BZOJ2631 tree
- Java_Java SE6调用动态编译
转自:http://www.cnblogs.com/flyoung2008/archive/2011/11/14/2249017.html 一.使用JavaCompiler接口编译java源程序 我们 ...