css强制一行显示超出的部分显示省略号

408 阅读1分钟

1、首先应该给盒子设置固定宽度;

width: 500px;

2、设置溢出部分隐藏;

overflow: hidden;

3、设置文本强制一行展示;

white-space: nowrap;

4、设置文本溢出显示省略号;

text-overflow: ellipsis;

总结:完整代码

.box {
      width: 500px; // 设置固定宽度
      overflow: hidden; // 设置溢出部分隐藏
      white-space: nowrap; // 设置文本强制一行展示
      text-overflow: ellipsis; // 设置文本溢出显示省略号
    }