当前位置：首页 > news >正文

css，控制超出部分隐藏，显示... css，控制超出部分不隐藏，换行

news 2025/11/14 15:29:52

css，控制超出部分隐藏，显示…

在网页开发中，可通过CSS属性实现文本超出部分隐藏并显示省略号，方法分为单行和多行文本处理。

对于单行文本，结合使用white-space: nowrap;、overflow: hidden;和text-overflow: ellipsis;这三个CSS属性即可实现。示例代码如下：

.a {/* 文本不换行 */white-space: nowrap;/* 超出的文本隐藏 */overflow: hidden;/* 溢出用省略号显示 */text-overflow: ellipsis;
}

对于多行文本，有不同的实现方式。一种是通过display: -webkit-box;、-webkit-box-orient: vertical;、-webkit-line-clamp、overflow: hidden;和text-overflow: ellipsis;来实现，其中-webkit-line-clamp可设置显示的行数。示例代码如下，设置显示3行：

.b {/* 这个标签作为弹性伸缩盒子模型展示 */display: -webkit-box;/* 设置元素的排列方式为纵向 */-webkit-box-orient: vertical;/* 要显示的行数 */-webkit-line-clamp: 3;/* 超出的文本隐藏 */overflow: hidden;/* 溢出用省略号显示 */text-overflow: ellipsis;
}

另一种实现超出两行甚至多行隐藏文本并显示省略号的方式如下：

/* 超出两行省略号 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

综上所述，通过合理运用这些CSS属性，能有效控制文本超出部分隐藏并显示省略号，满足不同场景下的页面设计需求。

css，控制超出部分不隐藏，换行

要使用 CSS 控制元素内容超出部分不隐藏并换行，可以结合使用 white-space 和 overflow 属性。

white-space 属性用于设置如何处理元素内的空白（包括换行、空格和制表符），可以将其设置为 normal 或 pre-wrap 来允许文本换行。normal 是默认值，空白符会被合并，但不会阻止换行；pre-wrap 会保留空白符，文本会自动换行，并且会在容器边界处换行。

overflow 属性用于设置当元素内容超出其指定尺寸时的处理方式，将其设置为 visible 可以让超出部分不隐藏。

以下是示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS 内容超出不隐藏并换行</title><style>.container {width: 200px;border: 1px solid #000;white-space: normal; /* 允许文本换行 */overflow: visible; /* 超出部分不隐藏 */}</style>
</head><body><div class="container">这是一个很长的文本内容，用于测试 CSS 控制元素内容超出部分不隐藏并换行的效果。当文本长度超出容器宽度时，它会自动换行，并且超出部分不会被隐藏。</div>
</body></html>