如下图所示,当一个定义了宽度的DIV或者其他元素中填充的全部为纯英文或者纯数字的时候,在IE和火狐中都会被撑大,而不会自动换行
![](http://dl.iteye.com/upload/attachment/190284/a44ad91c-104c-32ba-ab58-56497733e0a4.gif)
并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break
word-wrap用来控制换行
两种取值:
(1)normal
(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)
word-break用来控制断词
三种取值:
(1)normal
(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)
【解决方法】
可以在CSS中加入:
word-wrap:break-word;
word-break:break-all;
由于项目的需要,其中一个属性的值不能超过50个字符限制,在测试的时候发现table中只能显示大概20多个字符,其余的都被遮盖掉了,故搜寻了一下解决方案,以备下次再用。
我的测试程序如下:
<html>
<head>
<title>
测试英文和数字表格换行
</title>
</head>
<body>
<table style="table-layout:fixed;word-break:break-all" width="100%" border="0" cellspacing="0" cellpadding="5" >
<tr>
<th>值</th>
<th>含义</th>
<th>更新时间</th>
<th>操作人</th>
<th>操作</th>
</tr>
<tr>
<td>测试</td>
<td>ABCDGFHGJYABCDGFHGJYABCDGFHGJYABCDGFHGJYABCDGFHGJY</td>
<td>2009-09-18 15:43:24</td>
<td>某人</td>
<td>换行<td>
</tr>
</table>
</body>
</html>
这里说明一下其中style属性中的语法:
Html代码
table-layout :auto | fixed
参数:
Html代码
auto : 缺省设置. 列宽将设置为不可分割的最大的内容的宽度。
fixed : 表的宽度和列的宽度固定,不随单元格中内容而改变
1、设置了各个列的宽,没有设表的宽:表的宽度等于各个列的宽度和
2、设置了表的宽度,没有设各个列的宽度:各个列的宽度平均分配
3、要是都没设置宽度:表的宽度为100%,各个列的宽度平均分配
Html代码
word-break : normal | break-all | keep-all
参数:
Html代码
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任 意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
注意:该语法仅适用于IE内核,对火狐不兼容!
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0019/0284/a44ad91c-104c-32ba-ab58-56497733e0a4-thumb.gif)
- 大小: 6.5 KB
分享到:
相关推荐
css控制字母、数字文字自动换行方法css控制文字自动换行css控制文字自动换行
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识...
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识...
Html解决pdf导出出现的中文数字等不换行等问题, 已重新修改了Jar包, 重新打包好了,可直接使用,亲测好用.
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认...1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:...1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 复制代码代码如下: #wrap{wo
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...
break-word:它主要用来是控制是否将强制把单词换行,对于中英中文没有任何问题,但是对于长串的英文无效。 normal:英文单词不被拆开,它是默认值。 break-all,主要解决了长串英文的问题。主要用来是断开单词。在...
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有...1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-...
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
关于换行、裁剪的一些CSS属性 word-wrap: normal | break-word normal 正常换行,内容可以撑破容器,例如长单词或者长数字的情况break-word 以单词作为换行依据,如果需要,单词内部允许断行 word-break: normal | ...