css文本超出显示省略号

作者：翻成云恨雨愁发布日期:2025-02-20 浏览:113

/* 以下是实现文本超出显示省略号的CSS代码 */

.text-ellipsis {
    /* 设置元素为块级元素或行内块级元素 */
    display: inline-block;

    /* 设置最大宽度，可以根据需要调整 */
    max-width: 200px;

    /* 设置溢出内容隐藏 */
    overflow: hidden;

    /* 文本不允许换行 */
    white-space: nowrap;

    /* 溢出部分用省略号表示 */
    text-overflow: ellipsis;
}

解释说明：

display: inline-block;：确保元素可以设置宽度，并且不会独占一行。
max-width: 200px;：设置元素的最大宽度，当文本超出这个宽度时会触发省略号效果。你可以根据实际需求调整这个值。
overflow: hidden;：隐藏超出容器的内容。
white-space: nowrap;：防止文本换行，确保文本在一行内显示。
text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号（...）来表示被截断的部分。

将上述样式应用到需要处理的文本元素上，即可实现文本超出显示省略号的效果。

上一篇：css transition属性的定义和用法

下一篇：css 文本过长自动换行