css英文字母数字自动换行且不断词方法
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行
并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break
word-break用来控制断词
三种取值：
(1)normal
(2)break-all（是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）
(3)keep-all
word-wrap用来控制换行
两种取值：
(1)normal
(2)break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。）
解决方法
可以在CSS中加入
| 代码如下 | 复制代码 |
| word-wrap:break-word; | |
.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
| 代码如下 | 复制代码 |
| #wrap{word-break:break-all; width:200px; overflow:auto;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> | |
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容隐藏
| 代码如下 | 复制代码 |
| <table style="table-layout:fixed" width="200"> <tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table> | |
效果：隐藏多余内容
2.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
| 代码如下 | 复制代码 |
| <table width="200" style="table-layout:fixed;"> <tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table> | |
效果：可以换行
例子
| 代码如下 | 复制代码 |
| <title>SS</title> body,td,th { --> 英文对齐:<br> | |
您可能感兴趣的文章：
Vim实用技巧
php正则表达式完全教程六
如何设计网站结构与地址URL？
文本有关的样式和jQuery求对象的高宽问题分别说明
php正则表达式完全教程(六)
php判断字符串是纯英文、纯汉字或汉英混合格式
php实现文章中关键词加链接的方法
常用正则表达式实例
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
php中文分词与自动获取关键词的方法