文本显示省略号(单行文本+多行文本)

1.单行文本

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

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

具体实现如下:

CSS样式:

  <style>
    p {
      display: inline-block;
      width: 270px;
      line-height: 40px;
      background-color: pink;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  </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>
IT文库 » 文本显示省略号(单行文本+多行文本)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址