前端文本的溢出隐藏

谁借莪１个温暖的怀抱￠ 2023-05-22 06:39 4阅读 0赞

## 设置方式 ##

单行文本的溢出隐藏

overflow:hidden; //溢出隐藏
    
    text-overflow:ellipsis;//超出显示省略号
    
    white-space:nowrap;//强制文本在一行内显示

多行文本的溢出隐藏

overflow: hidden;
    
    text-overflow: ellipsis; // 超出显示'...'
    
    display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
    
    -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
    
    -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式

## 对于代码的解释 ##

对于溢出的文本是否用省略号标记 “…” 或者没有任何的省略号标记  
使用该属性必须有几个前提条件：

1.  该容器必须有 width 宽度 ，如果没有设置宽度该字数的溢出隐藏没有意义
2.  强制文本一行显示：white-space：nowrap；或者一个控制文本的行数 ： -webkit-line-clamp: 2; 这里表示设置的行数是2行
3.  该容器必须有溢出属性： 就是要有 overflow: hidden 属性
    
    1.  overflow：visible 默认值，不会被隐藏就是正常的显示
    2.  hidden 内容隐藏 ，对于超出容器宽度的内容隐藏
    3.  auto 自动判断，如果内容隐藏，则浏览器内显示滚动条
    4.  scroll 内容会隐藏并显示滚动条
    5.  inherit 表示从父元素继承overflow属性的值
    6.  overflow-x：hidden；隐藏横向滚动条 overflow-y：hidden；隐藏纵向滚动条
4.  溢出文本显示“…”：text-overflow：ellipsis；

## 对于剩余空间属性的一些属性值 ##

**white-space: 属性**  
1. 　normal 默认值，空白会被浏览器忽略  
2. 　nowrap 表示文本不换行，文本会在同一行上继续，直到遇到标签  
为止  
3. pre 表示保留空白，与html的 pre 标签类似  
4. pre-wrap 表示保留空白的符序列，和正常的换换行一样  
5. pre-line 表示对空白进行合并，但是保留换行符  
6. inherit 表示从父级元素继承 white-space的属性 （但是ie浏览器不支持该属性）

## 对于-webkit-line-clamp属性 ##

1.  这是一个不规范的css属性，用于限制文本的字数
2.  它必须结合一下几个属性一起用：
    
    1.  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
    2.  \-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
    3.  text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
3.  它只适用于块级元素
4.  对于兼容，只兼容谷歌和苹果浏览器(pc移动都支持)，Opera支持pc端