强制中文/整个英文单词自动换行与不换行 - CSS笔记

在平时的Web开发过程中、默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开、如果行末是长单词的话、整个单词都被换行到下一行、就像word一样、能够自动换行。

既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母、本文将给你条案。

• 原文来源：详情
• 属性介绍：w3school.

先看一下如下CSS代码：

.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/     
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/     
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/     
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/     
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

介绍

1、word-break:break-all;只对英文起作用、以字母作为换行依据

2、word-wrap:break-word; 只对英文起作用、以单词作为换行依据

3、white-space:pre-wrap; 只对中文起作用、强制换行

4、white-space:nowrap; 强制不换行、都起作用

5、white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行、超出部分隐藏且以省略号形式出现

注意、一定要指定容器的宽度、不然的话是没有用的、另外word-break 是IE5 专有属性

语法

word-break : normal | break-all | keep-all;

参数

normal : 　依照亚洲语言和非亚洲语言的文本规则、允许在字内换行

break-all : 　该行为与亚洲语言的normal相同、也允许非亚洲语言文本行的任意字内断开、该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同、对于中文、韩文、日文、不允许字断开、适合包含少量亚洲文本的非亚洲文本

说明

设置或检索对象内文本的字内换行行为、尤其在出现多种语言时、对于中文、应该使用break-all

强制不换行

p{
    white-space:nowrap;
}

自动换行

p{
    word-wrap: break-word;
    word-break: normal;
}

强制英文单词断行

p{
    word-break:break-all;
}

以上方法就是对英文或中文在浏览器上面的换行与不换行的处理、希望对大家有用