CSS换行：word-wrap、word-break和text-wrap差别
一、word-wrap：同意对长的不可切割的单词进行切割并换行到下一行。(中英文处理效果一样)
word-wrap有两个取值：
1、word-wrap: normal：仅仅在同意的断字点换行（浏览器保持默认处理）。
2、word-wrap: break-word：在长单词或 URL 地址内部进行换行。（即在容器末端有长单词不能全然显示，不会截断单词，而是作为总体，自己主动换行）
1: <!DOCTYPE>
2: <html lang="zh-en">
3: <head>
4: <title>CSS换行</title>
5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
6: <style type="text/css">
7: div{
8: padding: 0;
9: margin: 0 auto;
10: width: 200px;
11: height: 100px;
12: border: 1px solid red;
13: }
14: </style>
15: </head>
16: <body>
17: <div>
18: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
19: </div>
20: </body>
21: </html>
默认情况下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
加入样式：
1: word-wrap:break-word; //效果和上述一样
二、word-break：规定非中日韩文本的换行规则。
(对中文正常换行，对英文依照例如以下说明处理)
word-break有三个取值：
1、word-break: normal：使用浏览器默认的换行规则。
（等价于word-wrap: normal）
2、word-break: break-all：同意在单词内换行。（即在容器末端有长单词不能全然显示，会截断单词）
给div加入此规则
1: word-break:break-all;
效果：对sit进行了截断处理
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
3、word-break: keep-all：仅仅能在半角空格或连字符处换行。
为了演示，在原文本的ipsum、dolor和sit之间增加一个连字符（-）
1: <div>
2: Lorem ipsum-dolor-sit amet, consectetur adipiscing elit.
3: </div>
效果：在ipsum后产生了换行
三、text-wrap：规定文本的换行规则。
text-wrap是CSS3属性，有4个取值：
1、text-wrap：normal：仅仅在同意的换行点进行换行。
2、text-wrap：none：不换行。
元素无法容纳的文本会溢出。
3、text-wrap：suppress：压缩元素中的换行。浏览器仅仅在行中没有其它有效换行点时进行换行。
4、text-wrap：unrestricted：在随意两个字符间换行。
PS：眼下主流浏览器都不支持 text-wrap 属性。
CSS换行：word-wrap、word-break和text-wrap差别的更多相关文章
- CSS换行：word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
- LeetCode 5:Given an input string, reverse the string word by word.
problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- C#用Microsoft.Office.Interop.Word进行Word转PDF的问题
之前用Aspose.Word进行Word转PDF发现'\'这个字符会被转换成'¥'这样的错误,没办法只能换个方法了.下面是Microsoft.Office.Interop.Word转PDF的方法: p ...
- css换行用省略号代替
css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象 ...
- $().attr()的使用方法 && $().html()与$().text()的差别
<1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...
随机推荐
- Linux打补丁的一些问题
linuxpatchlinux内核文档commandheader类unix操作系统有一个很有趣的特性就是源代码级的补丁包.在windows上我们打补丁都是运行一个可执行的程序,然后就可以把补丁打完了, ...
- Validating a Model
- 【C#】Unicode的流言终结者和编码大揭秘
如果你是一个生活在2003年的程序员,却不了解字符.字符集.编码和Unicode这些基础知识.那你可要小心了,要是被我抓到你,我会让你在潜水艇里剥六个月洋葱来惩罚你. 这个邪恶的恐吓是Joel Spo ...
- python动态获取对象的属性和方法 （转）
转自未知,纯个人笔记使用 首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sys def foo():pass class Cat(object): ...
- 【转】使用 python IDLE 自带的 debuger 进行调试
IDLE自带了调试器(虽然不怎么使吧). 关于如何在 IDLE 中进行调试网上的教程讲的很模糊,于是自己整理了一下,和大家分享~ 第一步:打开python shell,并在shell中打开debuge ...
- Android Service AIDL
http://blog.csdn.net/liuhe688/article/details/6400385 在Android中,如果我们需要在不同进程间实现通信,就需要用到AIDL技术去完成. AID ...
- 恢复mysql数据库误删数据
前言 某一天,天朗气清:突然传来消息:数据库被删库了!这简直不亚于8级大地震呀:一找原因,服务器宕机造成了数据库数据丢失.于是,通过日志恢复数据的救援开始了. 正文 在数据库开启binlog功能 找到 ...
- mySQL 的 2个分类
1.将如下表中的每门成绩都大于80分的人名? 张三 语文 81 张三 数学 75 李四 语文 76 李四 数学 90 王五 语文 81 王五 数学 100 王五 英语 90 select * from ...
- Chris and Magic Square CodeForces - 711B
ZS the Coder and Chris the Baboon arrived at the entrance of Udayland. There is a n × n magic grid o ...
- ACM -- 算法小结（九）DP之Humble numbers
DP -- Humble numbers //一开始理解错题意了,题意是是说一些只有唯一一个质因数(质因数只包括2,3,5,7)组成的数组,请找出第n个数是多少 //无疑,先打表,否则果断 ...