css div不换行

作者：◆丶依然如风发布日期:2025-11-15 浏览:36

<!DOCTYPE html>
<html>
<head>
    <style>
        .no-wrap {
            white-space: nowrap; /* 防止内容换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
            width: 200px; /* 设置一个固定宽度 */
            border: 1px solid #000; /* 添加边框以便观察效果 */
        }
    </style>
</head>
<body>

<div class="no-wrap">
    这是一个很长的文本，它不会换行，即使超过了容器的宽度。这是一个很长的文本，它不会换行，即使超过了容器的宽度。
</div>

</body>
</html>

解释说明：

white-space: nowrap;：这个属性防止文本在遇到容器边界时自动换行。所有文本都会保持在同一行上。
overflow: hidden;：当文本超出容器的宽度时，超出部分会被隐藏。
text-overflow: ellipsis;：当文本被截断时，使用省略号（...）来表示被隐藏的部分。
width: 200px;：设置了一个固定的宽度，以便你可以看到文本在达到这个宽度后的行为。
border: 1px solid #000;：添加了一个边框，方便你观察容器的实际大小。

通过这些样式，你可以确保 div 中的文本不会换行，并且在超出容器宽度时会以省略号的形式显示。

上一篇：cssplaceholder颜色

下一篇：css设置背景颜色透明度