web前端布局中有时候在有限的空间中会出现很长的文字，由于对布局的要求有时候我们需要改变默认的换行方式，以自定义的方式控制换行，以下是使用css控制换行的相关总结
1、overflow-wrap，word-wrap
这两个属性效果其实是一样的，word-wrap是早期微软定义的属性，overflow-wrap是css3标准化的定义，为了兼容们目前word-wrap已经被作为overflow-wrap的别名来使用，这两个属性有以下的 两个属性值
normal
表示在正常的单词结束处换行。
break-word
表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
值得注意的是，使用break-word并不能强制断行中文文字，此属性仅能决定单词在结尾处需不需要换行切割
2、white-space
这个css属性是用来设置如何处理元素中的空白的，有以下几个值
normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。
简单来说，就是控制单钱文本中的空白符，换行符是否合并，是否保留，nowrap时无视一切换行符
3、word-break
用于指定怎样在单词内断行，可以 执行强制断行，有以下几个属性
normal
使用默认的断行规则。
break-all
对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal。
web前端布局中有时候在有限的空间中会出现很长的文字，由于对布局的要求有时候我们需要改变默认的换行方式，以自定义的方式控制换行，以下是使用css控制换行的相关总结1、overflow-wrap，word-wrap 这两个属性效果其实是一样的，word-wrap是早期微软定义的属性，overflow-wrap是css3标准化的定义，为了兼容们目前word-wrap已经被作为overflow-...
white
-
space
:no
wrap
; /强制文本不
换行
/
text-
overflow
:ellipsis; /溢出时显示省略号/
overflow
:hidden;/溢出部分隐藏/
}.ellipsis {
white
-
space
:no
wrap
; /强制文本不
换行
/
text-
overflow
:clip; /溢出时直接裁剪/
overflow
:hidden;/溢出
/*
文字
换行
汉字和英文数字字符也适配*/
white
-
space
:normal;word-break:break-all;word-
wrap
:break-word;
/**指定div内容 几行 然后省略号**/
overflow
: hidden;
text-
overflow
: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
-webkit-box-orient: vertical;
关于
换行
、裁剪的一些
CSS
属性
word-
wrap
: normal | break-word
normal 正常
换行
，内容可以撑破容器，例如长单词或者长数字的情况break-word 以单词作为
换行
依据，如果需要，单词内部允许断行
word-break: normal | break-all | keep-all
normal 正常
换行
，内容可以撑破容器，例如长单词或者长数字的情况
break-all 以字母作为
换行
依据
keep-all 中英文下和normal相同
white
-
space
: normal || pre || no
wrap
|| pre-line || pre-
wrap
||
pre {
white
-
space
: pre-
wrap
; /*
css
-3 */
white
-
space
: -moz-pre-
wrap
; /* Mozilla, since 1999 */
white
-
space
: -pre-
wrap
; /* Opera 4-6 */
white
-
space
: -o-pre-
wrap
; /* Opera 7 */
word-
wrap
: break-word; /* Internet Explo
在html文档中，有此节点，需要展示
换行
效果，该如何处理才有
换行
呢？
1. 使用 < pre > 标签
pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和
换行符
）都会显示出来。(紧跟在 < pre > 开始标签后的
换行符
也会被省略)
pre标签默认样式：
pre {
display: block;
关于
css
样式中文不
换行
不
兼容
谷歌、火狐的解决方法，今天在改一个织梦系统的[field:info /]...专家介绍的时候，这几行字在ie中是正常全部显示的，可是在谷歌、火狐里却只显示一行，怎么改都不管用，后来用了
white
-
space
:pre-
wrap
;立马成功！
1. word-break:break-all;只对英文起作用，以字母作为
换行
依据
2. word-
wrap
:break-wor...
css
换行
写法word-break:keep-all;/* 不
换行
*/
white
-
space
:no
wrap
;/* 不
换行
*/
overflow
:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-
overflow
:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与
overflow
:hidden;一起使用。*/
css
不
换行
写法word-break:brea
强制不
换行
：div{
white
-
space
:no
wrap
; }
自动
换行
： div{ word-
wrap
:break-word; word-break:normal; }
强制不
换行
white
-
space
: normal | pre | no
wrap
| pre-
wrap
| pre-line | inherit&...
为了在中文文本中避免出现过长的行，我们可以使用Text-
Overflow
属性和
Overflow
属性来省略超出显示的文本。这样，当
文字
过长时，它将被截断并在末尾添加省略号，从而更好地适应页面布局。
首先，我们需要在
CSS
中设置容器的宽度和最大宽度。然后，我们可以将
Overflow
属性设置为“Hidden”，这样当文本超过容器宽度时，它将被裁剪。接下来，我们可以使用Text-
Overflow
属性设置省略号，从而告诉浏览器如何在文本被裁剪时显示省略号。
例如，我们可以使用以下
CSS
代码来实现这个效果：
.container {
width: 300px;
max-width: 100%;
overflow
: hidden;
text-
overflow
: ellipsis;
white
-
space
: no
wrap
;
在这个例子中，我们设置容器的宽度为300像素，但它最大宽度为父元素的100%（这有助于使容器在不同的屏幕大小和设备上呈现得更好）。我们将
Overflow
属性设置为“Hidden”，并将Text-
Overflow
属性设置为“Ellipsis”。我们还将
white
-
space
属性设置为“no
wrap
”，这将防止文本在容器内自动
换行
，而是在一行上保持。
通过使用这些
CSS
属性和属性值，我们可以清晰地显示中文文本，同时避免出现过长的行，从而使页面显示更加美观和易于阅读。
