CSS控制连续英文字母和数字强制换行

原文链接：http://hi.baidu.com/jtgln/blog/item/e28291b355703fadd8335a56.html

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

1 div css xhtml xml Example Source Code Example Source Code
2 #wrap { white-space : normal ; width : 200px ; }
3 或者
4 #wrap { word-break : break-all ; width : 200px ; }
5 <div id="wrap">ddd111111111111111111111111111111</div>

效果：可以实现自动换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

1 div css xhtml xml Example Source Code Example Source Code
2 #wrap { white-space : normal ; width : 200px ; overflow : auto ; }
3 或者
4 #wrap { word-break : break-all ; width : 200px ; overflow : auto ; }
5 <div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；

1 div css xhtml xml Example Source Code Example Source Code
2 <style>
3 .tb { table-layout : fixed }
4 </style>
5 <table class="tbl" width="80">
6 <tr><td>
7 abcdefghigklmnopqrstuvwxyz 1234567890
8 </td></tr>
9 </table>
10
11

效果：可以自动换行

2.(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

1 div css xhtml xml Example Source Code Example Source Code
2 < style >
3 .tb { table-layout : fixed }
4 </ style >
5 < table class ="tb" width =80 >
6 < tr >
7 < td width =25% nowrap >
8 abcdefghigklmnopqrstuvwxyz 1234567890
9 </ td >
10 < td nowrap > abcdefghigklmnopqrstuvwxyz 1234567890 </ td >
11 </ tr >
12 </ table >

效果：两个td均正常自动换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

1 div css xhtml xml Example Source Code Example Source Code
2 < style >
3 .tb { table-layout : fixed }
4 .td { overflow : hidden ; }
5 </ style >
6 < table class =tb width =80 >
7 < tr >< td width =25% class =td nowrap >
8 < div > abcdefghigklmnopqrstuvwxyz 1234567890 </ div >
9 </ td >
10 < td class =td nowrap >< div > abcdefghigklmnopqrstuvwxyz 1234567890 </ div ></ td >
11 </ tr >
12 </ table >

这里单元格宽度一定要用百分比定义效果：正常显示，但不能换行。

注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果。

CSS控制连续英文字母和数字强制换行相关推荐

html中英文字母占几个px,CSS中解决英文字母、数字过长或者文本撑开网页
例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行. 原因是: 英文字母之间如果没有空格, ...
CSS系列之连续的字母或数字在Html盒子中不会自动换行，直接溢出
文章の目录原因: 解决方案: 写在最后原因: 在css布局中,遇到连续英文字母或连续数字在div.p.h1等盒子里排成一行显示不会自动随盒子宽度限制而自动换行.中文在 div 或任意盒子中均会自动 ...
【转】正则表达式匹配中文，英文字母和数字及_的写法！同时控制长度
[转]正则表达式匹配中文,英文字母和数字及_的写法!同时控制长度 using System.Text.RegularExpressions; 匹配中文:[\u4e00-\u9fa5] 英文字母:[a ...
正则表达式匹配中文，英文字母和数字及_的写法！同时控制长度
匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 同时判断输入长度: ...
【C#】正则表达式匹配中文，英文字母和数字及_写法！并控制长度
using System.Text.RegularExpressions; 匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[ ...
python中如何判断输入的是英文字母_python如何判断一个字符是否为汉字，英文字母，数字，空还是其他...
一直在忙工作的事情,对不起大家,今后一定抽出时间来写python,和大家一起学python. 今天给大家一段代码,大家可以看一下哈. # 判断一个字符是否为汉字,英文字母,数字,空还是其他 # 使用U ...
isalnum()函数：找出str字符串中为英文字母或数字的字符
找出str字符串中为英文字母或数字的字符 (1)Linux下编程用到的函数是:int isalnum(int c) 返回值:若参数c为字母或数字,则返回TRUE:否则返回NULL(0) #includ ...
[YTU]_1032( 统计出其中英文字母、数字、空格和其他字符的个数)
Description 输入一行字符,分别统计出其中英文字母.数字.空格和其他字符的个数. Input 一行字符 Output 统计值 Sample Input aklsjflj123 sadf918 ...
金山笔试题-字符串排序 : 写一个函数，实现对给定的字符串（字符串里面包括：英文字母，数字，符号）的处理...
写一个函数,实现对给定的字符串(字符串里面包括:英文字母,数字,符号)的处理.经过处理后的字符串其内容按字母,数字,符号的顺序存放.函数声明如下: void ParseString(char* pst ...

CSS控制连续英文字母和数字强制换行

CSS控制连续英文字母和数字强制换行相关推荐

最新文章

热门文章