zoukankan      html  css  js  c++  java
  • 文字超出盒子显示省略号

    我们平时经常看到的一种效果,文本内容超出后显示省略号。
    效果如下

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      .demo1 p {
         300px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    
      .demo2 p {
         300px;
        height: 200px;
        background-color: pink;
        margin: 200px auto;
        /* 多行文本省略号 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
      }
    </style>
    
    <body>
      <div class="demo1">
        <p>
          我是内容我是内容我是内容我是内容我是内容
    
        </p>
      </div>
      <div class="demo2">
        <p>
          我是内容我是内容我是内容我是内容我是内容
          我是内容我是内容我是内容我是内容我是内容
          我是内容我是内容我是内容我是内容我是内容
          我是内容我是内容我是内容我是内容我是内容
          我是内容我是内容我是内容我是内容我是内容
        </p>
      </div>
    </body>
    
    </html>
    
  • 相关阅读:
    JSTL XML标签库 使用
    JSTL SQL标签库 使用
    JSTL I18N 格式标签库
    基于struts2的ajaxfileupload异步上传插件的使用
    Spring 使用注解方式进行事务管理
    vi编辑器的使用方式
    js基础知识介绍
    选择语句
    数组
    0411作业
  • 原文地址:https://www.cnblogs.com/Bianco/p/13527405.html
Copyright © 2011-2022 走看看