英文字符和汉字自动换行和不换行的设置

Posted 2021-03-09 qdwz

一、英文换行
Div p{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
Div p{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
注意：有的时候英文单词是一个整体不能拆开！！！（若不同浏览器将超出部分隐藏，可以添加：overflow:auto;）
二、中文换行以及强制不换行
Div p{white-space:pre-wrap;width:150px;}/*只对中文起作用，强制换行*/
Div p{white-space:nowrap;width:10px;}/*强制不换行，都起作用*/
三、强制不换行以及超出宽度部分文字隐藏
.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

要想兼容ie和ff，需设置white-space: nowrap;，这样设置，不论是英文还是汉字，也不管是否有空格都会不换行显示
注意：div或者p标签里面要有一个宽度才可以换行，要不然没有作用！！！

 

解释：

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不断词，一句话一行，可以用来排列古诗哟~）

white-space : normal | pre | nowrap   
  
normal  :　 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行   
  
pre     :　 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为   
            standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode，  
            此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
   
nowrap  :　 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。  
  
兼容性： IE5.5 +，  Firefox