「CSS」- 隐藏过长的文本,使其显示为省略号

  CREATED BY JENKINSBOT

问题描述

我们需要隐藏文本行过长的部分,使其显示为省略号,保持其仅占有一行,而不是换行继续显示。

该笔记将记录:如何隐藏过长文本,使其仅占用一行,而超出的部分显示为省略号。

解决方案

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    overflow: hidden
}

注意事项,需要设置 width 才可以,否则 text-overflow: ellipsis; 无法生效。

参考文献

html – text-overflow: ellipsis not working – Stack Overflow