css 将溢出的文本转为省略号

css文本溢出转省略号

html代码

<div>
  <span>
    在windows文件夹中，随便单击一个文件夹，选中后，按F，则可以快速找到fonts字体文件夹
  </span>
</div>

css代码

div {
  width: 300px;
  border: solid 1px blue;
  /* 不换行 */
  white-space: nowrap;
  /* 溢出文本隐藏 */
  overflow: hidden;
  /* 将文本转为省略号 */
  text-overflow: ellipsis;
}

最终效果