CSS笔记 ( 十 ) 单行多行文本溢出 及 解决方法

 
 
 

---

博主的 Github 地址

---

0. 正常的文本显示

• 在 div 中输入文本, 默认会自动换行
• HTML代码

<div class="overtext solution">
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
    </div>

• CSS代码
  class solution 目前为空, 后面会用到

        .overtext {
            width: 250px; 
            height: 55px; 
            border: 2px aqua solid;
            font-weight: bold;
            color: white;
            margin: 20px;
        }

• 效果展示
  
   
   

1. 单行文本溢出

• 文本设置不换行, 超出容器边框的文本将会被挤出框外
  属性设置white-space: nowrap, 意思是遇到空格文本分隔符也不换行,
  由于这个属性默认值是white-space: normal, 会自带文本根据容器大小进行换行,
  要取消这个这个属性就要改变值, 因此值设置为不换行即可

 

• CSS代码

        .solution {
            white-space:nowrap;
        }

 

• 在容器调用的另一个 class 中加入这两行属性设置后的效果,
  如下所示, 文本没有进行换行并且超出了容器的边界
  
   
   
   

2. 单行文本溢出的解决方法

方法 1 : 溢出边界部分进行隐藏

• 利用 overflow 属性的设置即可将超出边界的部分进行隐藏
• CSS 代码展示

        .solution {
            white-space:nowrap;
            overflow: hidden;
        }

• 效果展示
  显而易见, 这个效果并不好, 在边界处的文字被边界截断了, 需要对边界进行微调,
  但这样每次改变都要进行调整, 自适应性极差, 不推荐经常更改的容器使用
  

方法 2 : 溢出边界部分用省略号展示

• 利用 overflow 属性的设置即可将超出边界的部分进行隐藏,
  需要配合overflow: hidden;一起使用
   
• CSS 代码展示

        .solution {
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

• 效果展示
  显而易见, 在即将超出边界的文本中, 被省略号所替代
  
   
   
   

3. 多行文本溢出

• 当容器中的文本过多时, 就会超出下边界, 容器就会不能容纳这些文字
   
• 溢出情况 1: 当文字高度是字体高度的整数倍时
  这时的边框没有截断文字, 刚好也能包下在边界内的文字
  
• 溢出情况 2: 当文字高度不是字体高度的整数倍时, 这时的边框就会截断文字
  
   
   
   

4. 多行文本溢出的解决办法

• 纯CSS解决的方法只有在 webkit 内核的浏览器才能实现
  其它用 CSS 的解决方法都不能完美解决这个问题, 只能用 JS 解决

webkit 内核浏览器适用的方法

• 附上 webkit 内核浏览器用的方法,
  由于移动端浏览器绝大部分是 webkit 内核,
  因此这个方法适合移动端使用

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

 

所有浏览器都适用的 JS 方法

这是博主自己写的 js 解决多行文本溢出的方法, 记录在这篇博客里面, 感兴趣的话可以看一下
https://blog.csdn.net/leon9dragon/article/details/103906616