文本显示省略号（单行文本+多行文本）

来源：互联网发布：java程序员求职简历编辑：程序博客网时间：2024/05/21 19:38

1.单行文本（兼容IE6以上、主流浏览器）

这里写图片描述

下面这三个一定要一起使用才能实现效果。另外要给盒子加宽度才能有超出部分。

white-space: nowrap; /*强制文本在一行内显示，不换行*/overflow: hidden; /*超出部分隐藏*/text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容IE*/-webkit-text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容Safari*/-o-text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容Opera*/

代码：

CSS样式:  <style>    p {      display: inline-block;      width: 270px;      line-height: 40px;      background-color: pink;            white-space: nowrap;      overflow: hidden;      text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容IE*/      -webkit-text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容Safari*/      -o-text-overflow: ellipsis; /*文本溢出时显示省略标记  兼容Opera*/    }  </style>HTML代码:  <p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>

2. 多行文本

这里写图片描述

display: -webkit-box;-webkit-line-clamp: 3;  /*数字是几就显示几行*/-webkit-box-orient: vertical;overflow: hidden;

代码：

CSS样式:<style>        .box {      width: 400px; /*要给一个宽度*/      display: -webkit-box;      -webkit-line-clamp: 3;/*数字是几就显示几行*/      -webkit-box-orient: vertical;      overflow: hidden;      background-color: pink;      line-height: 28px;  }  </style>HTML代码:<div class="box">    多行文本溢出最后一行显示省略号多行文本溢出最后一行显示省略号多行文本溢出最后一行显示省略号多行文本溢出最后一行显示省略号多行文本溢出最后一行显示省略号多行文本溢出最后一行显示省略号</div>

0 0