zoukankan      html  css  js  c++  java
  • css 多行文字超出部分省略号 一行文字超出部分省略号

    1.  <!-- 多行文字超出宽度部分省略号: 显示文字行数 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)-->

     html:

    <div class="con"  >
    
        <div id="div1" >
        1 hello world!这是我内容的超出三行省略号显示!2hello world!这是我内容的超出三行省略号显示!3hello world!这是我内容的超出三行省略号显示!
        </div>
    
    </div>

    css:

        .con{  position: relative }
    
           /* 多行文字超出宽度部分省略号 :   */
            #div1{
                position: absolute;   
                overflow: hidden;
                -ms-text-overflow: ellipsis;text-overflow: ellipsis;
                display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                -webkit-line-clamp: 3; /** 显示的行数 **/
                background: yellowgreen;
            }
    

      

    2. <!-- 一行文字超出宽度部分省略号 : 强制不换行 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)--> 

    html

    <div class="con"  >
        
        <div id="div2" >
            1 hello world!这是我内容的超出一行行省略号显示! 2 hello world!这是我内容的超出一行行省略号显示!
        </div>
    
    </div>
    

      css:

            .con{  position: relative }
    
            /*一行文字超出宽度部分省略号 : 强制不换行 隐藏多余的 文本多余显示省略号text-overflow:ellipsis */
            #div2{
                position: absolute;left: 0;top: 200px;
                 200px;   white-space:nowrap; overflow:hidden;  -ms-text-overflow: ellipsis;text-overflow: ellipsis;
                background: greenyellow;}
    

      

     参考:http://jingyan.baidu.com/article/15622f24017061fdfdbea558.html

    参考 http://blog.csdn.net/dannywj1371/article/details/8127778

  • 相关阅读:
    servlet中Cookie的编码问题
    servlet关于转发用法
    eclipse界面更改为黑色
    猜字符小游戏——可以设置等级
    uva 10655
    uva11029
    UVA11388 GCD LCM1 2 -1
    uva 11609
    poj 2436
    poj 2431
  • 原文地址:https://www.cnblogs.com/July-/p/5799552.html
Copyright © 2011-2022 走看看