css3实现文本裁剪

text-overflow:clip ellipsis string

clip 裁剪多余文字

ellipsis 以省略号表示裁剪文字

string 以指定字符串表示裁剪文字（非所有浏览器都支持，firefox支持）

使用的大前提，要先设置下面这两个地方，分别是：

/* 1.要先设置 不自动换行 */

white-space: nowrap;

/* 2.超出之后，要隐藏 */

overflow: hidden;

然后，再设置 当文本溢出之后，你要怎么办？

text-overflow: clip; 裁剪

text-overflow: ellipsis; 自动把多出的内容，显示为... 点点点（省略号）

把最后一个文本，换成3个省略号

text-overflow: "未完待续"; 你自己指定一个字符串，表示后面还有东西。

注意：这种写法，只有firefox浏览器支持

<div class="box">
  中方决定对在涉华问题上严重侵犯中国主权、负有主要责任的28名人员实施制裁，包括特朗普政府中的蓬佩奥、纳瓦罗、奥布莱恩、史达伟、波廷杰、阿扎、克拉奇、克拉夫特以及博尔顿、班农等。这些人及其家属被禁止入境中国内地和香港、澳门，他们及其关联企业、机构也已被限制与中国打交道、做生意。
</div>

css：

.box{ width: 300px; height: 300px; margin: 20px auto 10px; border:1px solid red; }

代码演示：

可以看到文本会自动换行，当我们不想内容全部显示出来时：

css：

.box {
  width: 300px;
  height: 300px;
  margin: 20px auto 10px;
  border: 1px solid red;
  /* 1、先设置不自动换行 */
  white-space: nowrap;
  /* 2、超出之后隐藏 */
  overflow: hidden;
  /* 文本裁剪 */
  text-overflow: elip;
  /* ellipsis 把最后一个文本换成三个点 */
  text-overflow: ellipsis;
  /* 指定文本内容，表示后面还有内容（仅火狐浏览器支持） */
  /* text-overflow: "more"; */
}

代码演示：