css 多行文字换行

每次做项目 都能碰到文字换行 尤其是标题和名称 ，都得百度一下，今天特意记下来
今天主题是超长英文文本自动换行word-wrap的使用，在介绍这个属性的同时，我还把word-break和white-space两个属性一起放进来介绍，因为这几个属性常给我平时的制作中带来混淆的感觉，搞不清楚在什么地带需要使用中word-wrap属性，什么时候又应该使用word-break属性，而又何时才能使用white-space。为了解决这个疑问，今天特意将他们放在本文中一起介绍。著作权归作者所有。
原文: http://www.w3cplus.com/content/css3-word-wrap © w3cplus.com

word-wrap 允许长单词换行到下一行

.mytest{
    word-wrap:break-word;}

语法：

word-wrap: normal|break-word;

normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

word-break:normal | break-all | keep-all
1、normal为默认值，如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；

2、break-all：可以强行截断英文单词，达到词内换行效果

3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示

针对上面几个不同取值我们来看看实例

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-word-wrap © w3cplus.com
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-word-wrap © w3cplus.com