一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不 换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应 该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。

解决方法(以IE,chrome,FF为测试浏览器):

{

  word-break:break-all; /*支持IE,chrome,FF不支持*/

  word-wrap:break-word;/*支持IE,chrome,FF*/

}

以下是对这两种方法的区别说明:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该 行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break:break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

   word-wrap:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。

语法:word-break : normal | break-all | keep-all

参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

   break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

   keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

语法: word-wrap : normal | break-word

参数: normal : 允许内容顶开指定的容器边界

    break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。


议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持
word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格
不能用 来代替,不然不能正确换行。

文章来自:http://www.cnblogs.com/mofish/archive/2011/02/16/1956263.html

CSS强制性换行的更多相关文章

  1. CSS强制性换行word-break与word-wrap的使用

    一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字 ...

  2. 说说最易被忽略的CSS强制性换行

    一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字 ...

  3. css文本超出部分省略号&CSS强制换行总结

    word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...

  4. CSS 段落/换行/缩进

    CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...

  5. CSS属性之word-break:break-all强制性换行

       一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空 ...

  6. css文本换行相关属性及解释

    本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...

  7. css 强制换行

    强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...

  8. CSS单词换行and断词

    背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定.   1 2 word–break: keep–all; wo ...

  9. CSS 强制换行和禁止换行学习

    强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...

随机推荐

  1. [转]看部电影,透透彻彻理解IoC(你没有理由再迷惑!)

    之前对依赖注入的概念一直感到模糊,直到看了这篇文章:http://www.iteye.com/topic/1122835 引述: IoC(控制反转:Inverse of Control)是Spring ...

  2. iOS 开源项目

    在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...

  3. HTML5学习笔记二 HTML基础

    一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...

  4. Android开发学习——android存储

    Android的存储 内部存储空间RAM内存:运行内存,相当于电脑的内存ROM内存:存储内存,相当于电脑的硬盘外部存储空间 SD卡:相当于电脑的移动硬盘    * 2.2之前,sd卡路径:sdcard ...

  5. iframe大小自适应

    前几天,舍友去某互联网公司面前端研发工程师.回来后,他就跟我们聊了下面试官给他出的题.其中,有一道题是“如何实现iframe高度的自适应?”.好吧,我承认,我听到iframe这个词的第一反应就是:这个 ...

  6. ant+findbugs 扫描代码生成报告

    1. 下载安装ant.findbugs 下载ant.findbugs最新压缩包解压到本地磁盘合适位置,比如: D:\Program Files\apache-ant-1.9.7 D:\Program ...

  7. C、C++: 引用、指针、实例、内存模型、namespace

    // HelloWorld.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  8. SQLite学习笔记(六)&&共享缓存

    介绍 通常情况下,sqlite中每个连接都会一个独立的pager对象,pager对象中管理了该连接的缓存信息,通过pragma cache_size指令可以设置缓存大小,默认是2000个page,每个 ...

  9. JVM之方法区

     基本特性: 线程共享区域,存储被JVM加载的类信息.常量.静态变量.即时编译器编译的代码等 堆的逻辑部分,不限定方法去内的内存位置和编译代码的管理策略,不限定实现垃圾回收 容量可不定也可动态扩展,不 ...

  10. linux

    托瓦兹跟BBS上面一堆工秳师一样, 他发现Minix虽然真癿很棒,但是谭宁邦教授就是丌愿意迚行功能癿加强,导致一堆工秳师在操作系统功能上面癿欲求丌满! 这个时候年轻癿托瓦兹就想:『既然如此,那我何丌自 ...