CSS 文本溢出不显示省略号

在网页开发中，经常会遇到文本内容超过容器大小的情况，此时需要对文本进行溢出处理。一种常见的处理方式是使用省略号来表示文本被截断，但有时候我们希望文本超出容器大小时不显示省略号，而是让文本完全显示出来。本文将介绍如何使用CSS来实现文本溢出不显示省略号的效果。

white-space 属性

在CSS中，可以通过 white-space 属性来控制元素中空白符的处理方式。该属性有几种常见的取值：

normal：默认值，合并多余的空白符，行内元素只能在内联元素和浮动元素之间换行。
nowrap：不进行换行，文本在一行上显示，如果一行不够宽，文本会溢出。
pre：保留空白符，文本按照源代码的格式显示。
pre-wrap：保留空白符，允许换行。
pre-line：合并多余空白符，允许换行。

我们可以利用 white-space 属性来实现文本溢出不显示省略号的效果。当设置该属性为 pre 或 pre-wrap 时，文本不会被截断，会显示完整内容。

.text {
    white-space: pre;
}

示例

下面是一个简单的示例，展示了如何使用 white-space 属性来实现文本溢出不显示省略号的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Overflow Without Ellipsis</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .text {
            white-space: pre;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, nulla in viverra fringilla, nisi justo
            ullamcorper sapien, et aliquam justo libero at purus.
        </div>
    </div>
</body>

</html>

在上面的示例中，我们定义了一个容器 .container，并设置其宽度为 200px ，同时使用 white-space: pre; 来实现文本溢出不显示省略号的效果。