css控制强制换行

一、发现问题

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

二、解决方法

以div为例

div{

word-break:break-all; /* 支持IE和chrome,FF不支持*/
word-wrap:break-word; /* 以上三个浏览器均支持 */
}

三、区别说明

① 对于截断的理解

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

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

② 支持版本
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)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

四、注意点

①如果发现些其中一个来控制换行无效,就写上两个。如td{ word-break:break-all;word-wrap:break-word }

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

原帖地址:http://www.cnblogs.com/mofish/archive/2011/02/16/1956263.html

时间: 2024-10-31 22:47:57

css控制强制换行的相关文章

css之强制换行代码(1/2)

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css  代码如下 复制代码 #wrap{white-space:normal; width:200px; } 1.(ie浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行  代码如下 复制代码 #wrap{word-break:

CSS强制换行对齐的实现方法

 本文实例讲述了CSS强制换行对齐的实现方法.分享给大家供大家参考.具体分析如下: 用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页布局,强制换行的功能很实用.   代码如下: <html> <head> <title>CSS强制换行对齐</title> </head> <body> 英文对齐: <div style="font-size:12px;width:300;text-alig

CSS控制H1不换行

在网页优化中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行. 可以使用下面的方法,H标签就不会强制换行了. <style type="text/css"> <!-- h1 {font-size: 12px;color: #09f; display : inline} h2 {font-size: 12px;color: #f00; display : inline} --> </style> <h1&

CSS中控制不换行属性

强制不换行属性 white-space:nowrap;    word-break:break-all;只对英文起作用,以字母作为换行依据    word-wrap:break-word; 只对英文起作用,以单词作为换行依据    white-space:pre-wrap; 只对中文起作用,强制换行    white-space:nowrap; 强制不换行,都起作用    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换

用css控制标题字符溢出,用省略号表示

 css控制文章列表,让标题溢出的文字以省略号方式表现. <div style="width:300px; height:22px;line-height:22px; white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">测试一下效果看能不能达到只逼供逼供逼供逼供珍贵逼供蚶见多识广薯在时工楞革革工进而杳碴国圆顶 </div> 用上面这段代码就可以实现,但如果要实现效果就得结合多个css的定义才

CSS控制文字溢出时的自动隐藏方法

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

css中字符换行的一些问题

我们在处理文章的内容的过程中由于文章内容混杂有中文.英文.数字等其他字符,而我们常见的英文和数字是无法在包裹元素中自动换行,这往往会导致元素被撑破,如下图所示: css中word-break可以解决这个问题,写个测试页面来做个笔记 css代码: body{font-size:14px;} p{ border:solid 1px red;width:200px;} html代码: <body>     <p class="test">English中文中文中文中文

页面的强制换行问题总结

问题|页面 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed.但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决办法. 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixe

CSS控制的内容超过容器宽度后显示省略号

css|控制|显示 一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可以达到同样的效果,虽然不完美. li {    width:50px;    white-space:nowrap;    text-overflow:ellipsis;    overflow: hidden;    } 首先是一个容器,可以是div,li,td等等,先定义宽度,"white-space:nowrap"是强制在一行内显示所有文本,不回行.&q