css截断换行

CSS截断换行的基础概念

CSS截断换行是指在网页设计中，当文本内容超出容器宽度时，通过CSS样式控制文本的显示方式，使其在适当的位置进行换行或截断，以避免内容溢出容器边界。

类型

自动换行：使用 word-wrap 或 overflow-wrap 属性，使文本在到达容器边界时自动换行。
强制换行：使用 white-space 属性，控制文本中的空白符处理方式，实现强制换行。
截断文本：使用 text-overflow 属性，结合 overflow 和 white-space 属性，实现文本截断并显示省略号。

应用场景

标题和标签：在有限的空间内显示较长的标题或标签。
列表项：在列表中显示较长的描述文本。
表格单元格：在表格中显示较长的数据。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS截断换行示例</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>

参考链接

常见问题及解决方法

文本溢出容器边界：
- 原因：容器宽度不足以容纳文本内容。
- 解决方法：使用 overflow: hidden 隐藏溢出内容，结合 text-overflow: ellipsis 和 white-space: nowrap 实现截断显示。

文本换行不理想：
- 原因：white-space 属性设置不当。
- 解决方法：根据需求调整 white-space 属性值，如 normal、nowrap、pre、pre-wrap、pre-line。
省略号不显示：
- 原因：未正确设置 text-overflow: ellipsis 或其他相关属性。
- 解决方法：确保 overflow: hidden 和 white-space: nowrap 已设置，并正确使用 text-overflow: ellipsis。