zoukankan      html  css  js  c++  java
  • css处理超出文本截断问题的两种情况(多行或者单行)

    1.非多行的简单处理方式:

      css代码

        .words{

          width:400px;

            overflow:hidden;  /*超过部分不显示*/
            text-overflow:ellipsis;  /*超过部分用点点表示*/
            white-space:nowrap;/*不换行*/

        }

      html代码/*

      <div class="words">
         For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.
       </div>

    2.规定行数的截断处理方式

      css代码

        .words{

        width:400px;

        text-overflow: ellipsis; /*有些示例里需要定义该属性,实际可省略*/
         display: -webkit-box;
         -webkit-line-clamp: 2;/*规定超过两行的部分截断*/
         -webkit-box-orient: vertical;
        overflow : hidden; 
          word-break: break-all;/*在任何地方换行*/

        }

  • 相关阅读:
    操作系统的一些琐碎知识
    # mysql _linux
    # linux GIT 配置连接
    linux maven 安装
    idea 与 git
    服务器搭建——jenkins构建后应该做什么(3)
    # 服务器搭建——jenkins搭建至构建成功(2)
    # 服务器搭建——入门踩坑 (1)
    # ajax入门(1)
    # heapsort
  • 原文地址:https://www.cnblogs.com/zhangmei/p/5866510.html
Copyright © 2011-2022 走看看