zoukankan      html  css  js  c++  java
  • 多行文本溢出

    单行文本溢出:

    代码:

    css:
    
     #demo4-one{
                150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
    }
    
    
    
    
    
    html:
    
     <div id="demo4-one">
            单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,
        </div>

    多行文本溢出:

    css:
    
    
    #demo4-two{
                150px;
                display:-webkit-box !important;
                overflow:hidden;
    
                text-overflow: ellipsis;
                word-break: break-all;
    
                -webkit-box-orient: vertical;
                /*显示两行,如果显示3行再溢出则改写成 -webkit-line-clamp:3;*/
                -webkit-line-clamp:2;
    
            }
    
    
    HTML:
    
    <div id="demo4-two">
            多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,
        </div>
  • 相关阅读:
    poj3411
    2241 排序二叉树
    1004 四子连棋
    Poj1482
    poj2046
    Poj3087
    poj3414
    php使用flock堵塞写入文件和非堵塞写入文件
    HTML样式以及使用
    高效程序猿的狂暴之路
  • 原文地址:https://www.cnblogs.com/wenzichiqingwa/p/4885622.html
Copyright © 2011-2022 走看看