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;/*在任何地方换行*/

    }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM