white-space:nowrap;         //强制不换行（中英文都起作用）

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

word-break:break-all;       // 只对英文起作用，以字母作为依据，强制换行

word-break:break-word;      //只对英文起作用，以单词作为依据，强制换行

overflow:hidden;            //超出的内容隐藏

text-overflow:ellipsis;     //超出的内容为省略号

单行文本

.text {
  width: 100px;
  white-space: nowrap;       /* 使文本不可换行 */
  word-break: break-all;     /* 英文换行，以字母作为依据 */
  overflow: hidden;          /* 隐藏溢出部分 */ 
  text-overflow: ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
}

多行文本

方法1

.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;       /* 超出的内容显示省略号 */
    word-break: break-all;         /* 英文换行，以字母作为依据 */
    display: -webkit-box;          /* 将对象作为弹性伸缩盒子模型显示 */   
   /*! autoprefixer: off */
    -webkit-box-orient: vertical;  /*设置子元素排列方式*/
    -webkit-line-clamp: 3;         /*设置显示的行数，多出的部分会显示为...*/
}

缺点： 只适用于WebKit内核的浏览器。所以大部分移动端浏览器都支持，google，Safari 浏览器只要不是版本过低都支持。ie，火狐浏览器不支持这个方法。

方法2

使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。

p {
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  width: 300px;
  /*设置文本为两端对齐*/
  text-align: justify;
  overflow: hidden;
}

p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  /*将省略号的大小设置为1个字体大小*/
  width: 1em;
  /*设置背景，将最后一个字覆盖掉*/
  background: #fff;
}

white-space

用来设置如何处理元素中的 空白

字符是否换行显示

语法

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces;

值

任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

white-space 值的行为

word-break

指定了怎样在单词内断行

语法

/* 关键字值 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* 已弃用 */

/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: unset;

值

CJK 指中文/日文/韩文

overflow-wrap & word-wrap

overflow-wrap 与 word-wrap 关系

word-wrap 属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

作用

用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

语法

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;