zoukankan      html  css  js  c++  java
  • CSS div内文字显示两行,超出部分省略号显示

    1. 概述

    1.1 说明

    在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理。使用识别码/前缀-webkit进行处理可直接得到相应效果。

    1.2 -webkit

    WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别。

    备注:IOS版的微信、android版本的X5内核,都是采用webkit内核。

     2. 代码

    2.1 代码示例

    • text-overflow属性规定当文本溢出包含元素时发生的事情
      • ellipsis 显示省略符号来代表被修剪的文本(单行溢出)
      • clip 修剪文本
      • string 使用给定的字符串来代表被修剪的文本
      • -o-ellipsis-lastline  从 Opera 10.60 开始有此值,但不在标准之内
    • -webkit-line-clamp WebKit支持,不在标准之内(ie和火狐不兼容)
    .fontClass {
      color: #333;
      font-size: 28rpx;
      line-height: 40rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

     

    2.2 单行示例

    .fontClass{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

      

  • 相关阅读:
    同行——冲刺集合!!!
    团队作业第六次——事后诸葛亮
    同行——冲刺总结
    同行——冲刺day7(11.14)
    同行——测试随笔
    同行——冲刺day6(11.13)
    同行——冲刺day5(11.12)
    同行——冲刺day4(11.11)
    同行——冲刺day3(11.10)
    同行——冲刺day2(11.9)
  • 原文地址:https://www.cnblogs.com/ajuan/p/10419740.html
Copyright © 2011-2022 走看看