Web前端【超出隐藏与显示】多种解决方案集锦
超出隐藏是指当某个元素内的内容，超出该元素的边界时，如何隐藏这些内容。
overflow
overflow属性用于设置元素内容溢出时的处理方式。它有以下几个可能的取值：
visible：默认值，不进行任何处理，超出部分直接显示在边界外。
hidden：隐藏溢出的内容。
scroll：添加滚动条以便浏览溢出内容。
auto：如果需要，会添加滚动条以便浏览溢出内容。
如果要实现超出隐藏，我们就要用到overflow属性，将其设置为hidden或者scroll。
text-overflow
text-overflow属性用于控制文本的溢出方式。它有以下几个可能的取值：
clip：默认值，不显示文本溢出的内容，直接截断。
ellipsis：显示一个省略号以指示文本溢出。
当我们想要控制文本的溢出时，可以使用text-overflow属性。
white-space
white-space属性用于指定元素内的空白符（空格、换行符等）如何处理。它有以下几个可能的取值：
normal：默认值，忽略多余的空白符，将连续的空白符合并为一个空格。
nowrap：不换行，每行的文本会持续向右溢出。
pre：保留所有的空白符，包括换行符和连续的空格。
pre-wrap：保留所有的空白符，但允许换行。
pre-line：合并多余的空白符，但保留换行符。
通过设置white-space属性，我们可以控制元素内文本的换行方式，进而影响元素的大小和溢出状态。
超出隐藏示例
下面定义了一个名为 hidden-ellipsis 的 class，当文本超出容器指定的宽度时，内容会被截断，并显示省略号。
title属性显示
CSS
HTML
1
title属性显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
单行显示
CSS
HTML
2
单行显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
多行显示
CSS
HTML
3
多行显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
弹窗显示
HTML
4
弹窗显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
JavaScript
let layerTipsIndex;
$('.move-show-tips').hover(function(e){
layerTipsIndex = layer.tips(e.target.innerHTML, e.target, { time: 10000 });
}, function(e){
layer.close(layerTipsIndex);
})我们搭配 layer 的 tips ，当鼠标移动到被隐藏的单元格时，显示完整内容。
完整代码示例
demo
num
name
remark
1
title属性显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
2
单行显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
3
多行显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
4
弹窗显示
这是一段很的长文字，我的父容器设置了宽度，并且设置了超出后需要隐藏内容的样式，现在您可以看到我的渲染效果了。
希望本文能够对您有所帮助，感谢您的阅读！
人人为我，我为人人，谢谢您的浏览，我们一起加油吧。