CSS溢出隐藏_省略号

CSS 溢出隐藏

关于溢出隐藏、溢出变省略号和鼠标移入显示原内容的知识点如下：

溢出隐藏（Overflow Hidden）：

通过设置CSS属性overflow: hidden;来实现溢出内容的隐藏。当内容超过div容器的大小时，超出部分将被隐藏，不会显示在页面上。这种方式常用于裁剪文本或图片，确保内容不会超出容器范围，避免页面布局混乱。

• 示例：

<div style="width: 200px; height: 100px; overflow: hidden;">
    这是一段超过容器大小的文本内容，使用overflow: hidden;进行隐藏。
</div>

溢出变省略号（Overflow Ellipsis）：

通过设置CSS属性overflow: hidden;和text-overflow: ellipsis;来实现溢出内容的省略显示。当内容超过div容器的大小时，超出部分将被隐藏，并在最后显示省略号。注意，为了生效，需要在文本容器上设置CSS属性white-space: nowrap;来禁止文本换行。

• 示例：

<div style="width: 200px; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    这是一段超过容器大小的文本内容，使用overflow: ellipsis;进行省略显示。
</div>

鼠标移入显示原内容（Tooltip）：

通过设置title属性为div元素添加提示文本，当鼠标悬停在div上时，浏览器会显示提示文本。提示文本可以是div内容的一部分或相关的描述，用于向用户提供附加信息。

• 示例：

<div title="这是提示文本，鼠标移入时将显示原内容。">
    鼠标移入此处显示提示文本。
</div>

<div style="width: 200px; height: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="这是一段超过容器大小的文本内容，使用overflow: ellipsis;进行省略显示。">
    这是一段超过容器大小的文本内容，使用overflow: ellipsis;进行省略显示。
</div>

注意：以上知识点是通过CSS来实现对div内容的处理，需要根据具体场景和需求来选择适合的方式来处理溢出内容。