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

问题描述

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

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

解决方案

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