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; }

代码演示:

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

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"; */
}

代码演示:

202101211611222002166467