极客笔记CSS 文字超出隐藏
在设计和开发网页时，经常会遇到文字内容超出容器限制的情况。这样的情况往往会导致页面布局混乱，影响用户的阅读体验。为了解决这个问题，CSS 提供了多种方式来隐藏超出容器的文字。本文将详细介绍 CSS 中文字超出隐藏的几种常用方法。
1. text-overflow 属性
text-overflow 是 CSS 中控制文字内容超出容器时的溢出表现形式的属性。它只对单行文本有效，适用于块级元素和浮动元素。
1.1 clip
设置 text-overflow 属性为 clip 时，超出容器的文字会被剪切掉，并不显示在页面上。
.text-overflow-example {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
示例代码中，通过设置容器宽度为 200px，使用 white-space: nowrap 禁止文字换行，overflow: hidden 隐藏超出容器的文字。最后，通过设置 text-overflow: clip 将超出容器的文字剪切掉。
1.2 ellipsis
设置 text-overflow 属性为 ellipsis 时，超出容器的文字会被省略号（…）替代。
.text-overflow-example {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
示例代码中，同样先设置容器宽度、禁止文字换行和隐藏超出容器的文字。然后，通过设置 text-overflow: ellipsis 将超出容器的文字替换为省略号。
1.3 combined
当 text-overflow 和 overflow 属性一起使用时，可以实现更加灵活的文本超出隐藏效果。
.text-overflow-example {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-overflow-example:hover {
overflow: auto;
white-space: normal;
}
示例代码中首先设置了容器的宽度、禁止文字换行和隐藏超出容器的文字。然后，当鼠标悬停在容器上时，通过修改 overflow 属性为 auto，文字内容会根据容器的大小显示滚动条，同时设置 white-space 为 normal，使文字可以自动换行显示。
2. word-wrap 和 white-space
除了使用 text-overflow 属性，还可以通过设置 word-wrap 和 white-space 属性来实现文字超出隐藏的效果。
2.1 word-wrap
设置 word-wrap 属性为 break-word 时，超出容器的长单词将自动被截断到下一行显示。
.word-wrap-example {
width: 200px;
word-wrap: break-word;
}
示例代码中，设置容器宽度为 200px，然后通过设置 word-wrap: break-word，当文字超出容器限制时，长单词会被截断到下一行显示。
2.2 white-space
通过设置 white-space 属性，可以控制文本的换行和空白符的处理方式。
.white-space-example {
width: 200px;
white-space: nowrap;
overflow: hidden;
}
示例代码中，设置容器宽度为 200px，然后通过设置 white-space: nowrap 禁止文字换行，再利用 overflow: hidden 隐藏超出容器的文字。
3. 使用 JavaScript 动态控制文字超出隐藏
除了使用 CSS，还可以通过 JavaScript 动态控制文字超出隐藏。
<!DOCTYPE html>
<html>
<head>
<style>
.text-overflow-example {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="container" class="text-overflow-example">
This is a long text that will be truncated if it exceeds the container width.
</div>
<script>
const container = document.getElementById("container");
container.addEventListener("click", function() {
this.classList.toggle("text-overflow-example");
});
</script>
</body>
</html>
示例代码中，通过 JavaScript 获取到容器元素，并添加了一个点击事件监听器。当点击容器时，通过切换元素的 class，即通过添加或移除类名 “text-overflow-example”，实现了文字超出隐藏效果。
总结起来，CSS 提供了多种方式来实现文字超出隐藏的效果。根据实际需求，在选择合适的方式时可以更加灵活地操控文字显示和隐藏。