zoukankan      html  css  js  c++  java
  • 设置Div多行文本超出时,以省略号代替

    这个文章不错 http://www.css88.com/archives/5206

    css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式。

    下面是从 w3shcool截的图:

    但是 text-overflow 有一个缺陷,它只能对单行文本起效果,如果是多行文本就不好使了。

    如果想对多行文本也实现以省略号代替超出部分的话,可以使用下面方法(貌似局限于webkit内核):

    max-height:100px;       /*首先设置div高度*/
    
    overflow:hidden;           /*设置超出部分隐藏*/
    
    text-overflow:ellipsis;    /*然后设置文本隐藏方式*/
    
    /*为了实现多行文本也有效果要设置如下3个属性,具体属性的含义我还不是很清楚:*/
    
    display:-webkit-box;
    
    -webkit-line-clamp:3;    /*只显示3行,如果不设置这个属性,会出现文本被拦腰截断的现象*/
    
    -webkit-box-orient: vertical;

    最后的效果:

  • 相关阅读:
    委托事件
    泛型
    栈和队列
    泛型
    枚举与位枚举
    数组 集合
    .NET Framework 简介
    三行代码 完美解决word标签文字替换 POI增强版 可插入图片
    Github国内镜像网站,解决Github访问的神器
    Eureka
  • 原文地址:https://www.cnblogs.com/lipijin/p/4111201.html
Copyright © 2011-2022 走看看