css文字一行显示

作者：霸气邪剑仙发布日期:2026-05-16 浏览:109

/* 使用 white-space: nowrap; 来确保文字在一行内显示 */
.text-one-line {
    white-space: nowrap;
    overflow: hidden; /* 当内容超出容器宽度时隐藏溢出部分 */
    text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
}

<!-- 示例 HTML -->
<div class="text-one-line">
    这是一段非常长的文字，将会在一行业内显示，超出部分将被隐藏并用省略号表示。
</div>

解释说明：

white-space: nowrap;：防止文本换行，强制所有文本显示在同一行。
overflow: hidden;：当文本内容超出容器宽度时，隐藏溢出的部分。
text-overflow: ellipsis;：用省略号（...）来表示被隐藏的文本部分。

上一篇：css引入字体文件

下一篇：设置了css样式但不显示