overflow: hidden;white-space: nowrap; 和 text-overflow: ellipsis的用法

在CSS中，overflow: hidden;、white-space: nowrap; 和 text-overflow: ellipsis; 这三个属性经常一起使用，以实现当文本内容超出容器宽度时，用省略号（...）来表示未完全显示的文本。下面是对这三个属性的详细解释：

1. overflow: hidden;

• 这个属性用来设置当内容溢出元素框时发生的事情。

• hidden 值表示内容会被修剪，并且溢出的内容是不可见的。

• 在这个上下文中，它确保当文本内容超出容器宽度时，超出的部分不会被显示，为使用省略号做准备。

2. white-space: nowrap;

• white-space 属性用来设置如何处理元素内的空白字符。

• nowrap 值表示文本不会换行，直到遇到 <br> 标签为止。

• 这确保了文本内容在同一行内显示，即使它超出了容器的宽度，也不会自动换行到下一行。这是实现省略号效果的关键一步，因为如果不阻止换行，文本就会继续在新的一行显示，而不是被截断并用省略号表示。

3. text-overflow: ellipsis;

• text-overflow 属性用来指定当文本溢出包含元素时发生的事情。

• ellipsis 值表示当文本溢出时，显示省略号（...）来标示有被截断的文本。

• 这个属性只有在 white-space 设置为 nowrap（或 pre-wrap、pre-line 但这些情况不常见用于此目的）且 overflow 不是 visible 时才有效。

综合应用示例

假设你有一个固定宽度的容器，想要里面的文本在超出宽度时用省略号表示，你可以这样设置CSS：

css复制代码.container {width: 200px; /* 容器宽度 */overflow: hidden; /* 隐藏溢出内容 */white-space: nowrap; /* 禁止文本换行 */text-overflow: ellipsis; /* 使用省略号表示溢出文本 */}

然后，将这个类应用到你的HTML元素上：

html复制代码<div class="container">这是一段很长的文本，它会被截断并用省略号表示...</div>

这样，当文本内容超出200px的宽度时，就会被截断，并在末尾显示省略号，提示用户还有更多内容未被显示。