一、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 属性。

来源：http://www.ido321.com/621.html

CSS换行：word-wrap、word-break和text-wrap差别的更多相关文章

  1. CSS换行：word-wrap、word-break和text-wrap区别

    一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...

  2. Microsoft.Office.Interop.Word 创建word

    Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...

  3. reverse the string word by word

    题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...

  4. 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 ...

  5. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  6. CSS换行2

    1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...

  7. C#用Microsoft.Office.Interop.Word进行Word转PDF的问题

    之前用Aspose.Word进行Word转PDF发现'\'这个字符会被转换成'¥'这样的错误,没办法只能换个方法了.下面是Microsoft.Office.Interop.Word转PDF的方法: p ...

  8. css换行用省略号代替

    css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象 ...

  9. $().attr()的使用方法 &amp;&amp; $().html()与$().text()的差别

    <1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...

随机推荐

  1. HDU 2859 Phalanx(二维DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2859 题目大意:对称矩阵是这样的矩阵,它由“左下到右”线对称. 相应位置的元素应该相同. 例如,这里是 ...

  2. 铁器 · Burp Suite

    Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTTP 消息,持久性,认证,代 ...

  3. Mysql学习之order by的工作原理

    在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.假设你要查询城市是“杭州”的所有人名字,并且按照姓名排序返回前 1000 个人的姓名.年龄. 查询语句为: ; 全字段排序 为 ...

  4. Jenkins+Ant+SVN+Jmeter实现持续集成

     一.什么是持续集成? 待补充 二.说明: 本次框架介绍中不涉及到介绍框架的构建过程,介绍如何构建环境详细的构建见前篇文章: jmeter+Jenkins持续集成(邮件通知) Jmeter+Jenki ...

  5. [你必须知道的.NET]第二十回：学习方法论

    说在,开篇之前 本文,源自我回答刚毕业朋友关于.NET学习疑惑的回复邮件. 本文,其实早计划在<你必须知道的.NET>写作之初的后记部分,但是因为个中原因未能如愿,算是补上本书的遗憾之一. ...

  6. 【严蔚敏】【数据结构题集（C语言版）】1.16 自大至小依次输出读入的三个整数X,Y,Z

    #include <stdio.h> #include<stdlib.h> int main() { int x,y,z,temp; scanf("%d%d%d&qu ...

  7. DB First 中对Repository 层封装的几点小记

    在数据库表创建完成的情况下,使用DB First 进行开发,封装底层会遇到一些小问题,在此记录一下,供以后参考. 主要解决的问题有: 1.EF上下文管理 2.BaseRepository的封装 3.E ...

  8. HadoopMR-Spark-HBase-Hive

     YARN资源调度: 三种 FIFO 大任务独占 一堆小任务独占 capacity 弹性分配 :计算任务较少时候可以利用全部的计算资源,当队列的任务多的时候会按照比例进行资源平衡. 容量保证:保证队 ...

  9. 在ESP分区新建win10引导

    之前脑抽把win10的引导给删了,百度了很久看到很多办法但在我这里总是不能解决,后来总算在google里搜到了一个方法重建了win10 的引导 之前经历的方法有 使用win10USB启动盘启动电脑后选 ...

  10. JSON与Javabean转换的几种形式

    JSON格式的数据传递是最常用的方法之一,以下列出了常用的几种形态以及与Javabean之间的转换: String json1="{'name':'zhangsan','age':23,'i ...