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 弹窗显示
这是一段很的长文字,我的父容器设置了宽度,并且设置了超出后需要隐藏内容的样式,现在您可以看到我的渲染效果了。


希望本文能够对您有所帮助,感谢您的阅读!

人人为我,我为人人,谢谢您的浏览,我们一起加油吧。