本文共 1075 字，大约阅读时间需要 3 分钟。

前言

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

我们在设计网站的时候有时会遇到这样一个需求：因为页面空间大小的问题，需要将多余的文字隐藏起来，并以省略号代替，类似这样的效果：

正文

让我们分别来看一下使用了这些样式，和不使用这些样式的区别吧

• html内容

   
    
    我是一段测试文本1我是一段测试文本2我是一段测试文本3我是一段测试文本4我是一段测试文本5我是一段测试文本5
   

1. 不使用特殊样式

• 样式内容

.box{
       background: red;    width: 100px;}

• 效果展示
  
  我们可以看到，文本根据边框的宽度，自动换行，并且全部显示

2. 使用 white-space: nowrap 样式

• 样式内容

.box{
       background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/}

• 效果图
  
  3. 使用white-space: nowrap和overflow:hidden样式
• 样式内容

.box{
       background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/    overflow: hidden;                /*隐藏多余内容*/}

• 效果图
  
  4. 使用white-space: nowrap和overflow:hidden和text-overflow: ellipsis 样式
• 样式内容

.box{
       background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/    overflow: hidden;                /*隐藏多余内容*/    text-overflow: ellipsis;         /*将多余内容以省略号的方式展示*/}

• 效果图
  

结束语

希望这篇文章对大家能有所帮助

转载地址：https://lpyexplore.blog.csdn.net/article/details/105898964 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！