css超出长度自动截断

CSS超出长度自动截断基础概念

CSS超出长度自动截断是指当文本内容的长度超过其容器的宽度时，通过CSS样式控制文本的显示方式，使其在容器边界处被截断并显示省略号（...），而不是溢出容器。

类型

文本溢出截断：使用CSS属性 text-overflow: ellipsis 实现文本截断并显示省略号。
单行文本截断：结合 white-space: nowrap 和 overflow: hidden 实现单行文本截断。
多行文本截断：使用 -webkit-line-clamp 属性（非标准，但广泛支持）实现多行文本截断。

应用场景

新闻列表：在有限的空间内显示新闻标题。
商品列表：在商品卡片中显示商品名称。
搜索结果：在搜索结果列表中显示摘要信息。

示例代码

单行文本截断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本截断示例</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        这是一段非常长的文本，将会被截断并显示省略号。
    </div>
</body>
</html>

多行文本截断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本截断示例</title>
    <style>
        .container {
            width: 200px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        这是一段非常长的文本，将会被截断并显示省略号。这是第二行文本，也会被截断。
    </div>
</body>
</html>

常见问题及解决方法

问题：为什么文本没有截断并显示省略号？

原因：

容器宽度不够：确保容器的宽度足够容纳部分文本内容。
CSS属性未正确设置：确保 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap（对于单行文本）都已正确设置。
浏览器兼容性：对于多行文本截断，-webkit-line-clamp 属性在某些浏览器中可能不被支持。

解决方法：