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

        }

  • 相关阅读:
    Cocos2d-JS中的Sprite精灵类
    Cocos2d-JS中的精灵菜单和图片菜单
    Cocos2d-JS中的文本菜单
    SpringMVC01
    xml文件
    MyEclipse保存文件时 自动格式化代码! 不包括文档注释
    MyEclipse修改servlet模版
    java05 选择结构
    ssh注解开发
    使用socket实现聊天功能
  • 原文地址:https://www.cnblogs.com/zhangmei/p/5866510.html
Copyright © 2011-2022 走看看