zoukankan      html  css  js  c++  java
  • css样式问题

    一下内容只是我工作中用过的,我又容易忘记,所以写在这里,记忆一下

    三者必须结合才可以实现溢出文本实现省略效果

    	overflow: hidden;       /*溢出内容隐藏*/
        text-overflow: ellipsis;  /*溢出出现省略标记*/
        white-space: nowrap;   /*强制文本在一行显示*/   
    
    

    多行显示时,最后一行超出的部分隐藏并显示省略号

    网上很多的解决方法是针对一行超出部分,隐藏并显示省略号的,代码如下:

    overflow:hidden;
    white-space:norwrap;
    text-overflow:hidden;
    

    针对webkit浏览器,多行显示时可以通过以下css代码实现,但对于非webkit浏览器,这种写法没有效了。

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    

    -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

    -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

  • 相关阅读:
    Decimal、 Float、 Double 使用
    jdk1.7的collections.sort(List list)排序问题
    $watch、$digest、$apply
    BeanNameViewResolver
    This system is not registered with RHN
    JNI字段描述符-Java Native Interface Field Descriptors
    服务器端cs文件
    ASP.NET基础(一)
    Android开发日记(七)
    登陆 注册
  • 原文地址:https://www.cnblogs.com/onlychen/p/6446092.html
Copyright © 2011-2022 走看看