css建网站之英文单词的自动换行技巧

css建网站之英文单词的自动换行技巧

在制作网页过程中，css样式编写中，可能会遇到文字换行的问题，其中英文换行可能会困扰着很多初学者，而今天我就这个问题进行相应的阐述，学过css的朋友应该都知道，控制文字是否换行可以直接使用css中的word-break来进行调整，但是对于英文来说，我们广州建网站公司要让其能满足所有浏览器的需要，仅仅这一个属性是不够的。

根据广州建网站公司所了解的一些资料显示，英文过多，过长，不仅仅影响到表格，还影响到了div，有可能会撑破表格和div，对于表格和div的解决方法各有不同，首先我们来看在表格中改如何解决这个问题。

如果你使用的是表格布局，表格内的内容多以英文为主，而且英文不会换行，那么你只需要在css中加入如下代码即可

根据 CSS2中文手册

word-break版本：IE5+专有属性　继承性：有
语法：
word-break : normal | break-all | keep-all
取值：
normal :　 默认值。允许在词间换行
break-all :　 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :　 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用 break-all 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak 。
示例：
div {word-break : break-all; }
应用于：
IE5.0+

word-wrap版本：IE5.5+专有属性　继承性：有
语法：
word-wrap : normal | break-word
取值：
normal :　默认值。允许内容顶开指定的容器边界
break-word :　内容将在边界内换行。如果需要，词内换行( word-break )也将发生

说明：
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap 。
示例：
div { word-wrap: break-word; word-break: break-all; }

注意这个
break-word :　内容将在边界内换行。如果需要，词内换行( word-break )也将发生

所以 word-wrap够用了，默认会不拆开单词换行，但是如果真有一个非常长的单词，比如上次某发错了版的史上最恐怖的12个英文单词，它也是会拆行的，这样避免了表格被撑坏。
不过这个没有被w3c作为css2的标准，所以Mozilla 不支持这个属性，如果大家都好好写英文单词就没事情，Firefox也是不拆开单词换行的，如果碰到有人写很长的单词，Mozilla Firefox就不会换行一直撑破了。

【关键词标签】css建网站之英文单词的自动换行技巧

• 广州建网站：如何搭配网页色彩[色彩大全]
• 仪器设备网站建设对企业有哪些好处？建站报..
• 机械设备网站建设需要什么资料,网站做好后..
• 东莞网站开发——企业官网网站布局8大注意..
• 东莞公司官网建设——网站建设功能模块大全
• 东莞网站建设公司——10大网站优化须知
• 广州建网站小贴士,掌握HTML建站重点
• 公司要建网站——建一个公司网站多少钱
• 花都建网站公司,div建网站使用marg..
• 企业网站建设如何策划关于我们的页面设计
• 做一个普通企业网站多少钱
• 企业网站建设：如何规范HTML格式？
• 公司官网定制设计——高端大气的网页设计
• 环保设备网站建设后怎样做优化推广+宣传营..
• 磨具_浮石厂家/公司网站建设如何设计网页..