• 几个css问题


    1.中文、英文和数字的表现方式不一样。

      中文可以自动换行,英文和数字并不会自动换行,设置强制换行显示。word-wrap:break-word;

    2.textarea中输入文字多的情况下,和邻边的input居中对齐还是顶对齐

      使用flex布局,align-items:center属性

    3.文字两行显示之后...

      1.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{
                 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        </style>
    </head>
    <body>
    <p>就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
        就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
        就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生
        就发生的龙卷风收到货发生的 阿斯顿发计划书店里辅导书给客户发大水了发斯蒂芬返回发生的回复科技收到货发生</p>
    </body>
    </html>
    

      

    效果图:

    注意点:看代码有webkit自然也就chrome支持好,其他浏览器就。。啧啧啧

     见于浏览器兼容性不太好。可以适应js进行判断文字的长度,如果大于长度之后,添加...

    const wordLength = 60;
    if (text.length > wordLength) {
         for (let i =0,len=text.length;i<len;i++) {
            showWords = text.substring(0,i);
           if(text.length > wordLength){
             showWords +=''.....;
             break;
           }
        }  
    } else  {
        showWords = text;
    }
    
        
    

      

  • 相关阅读:
    MySQL源码编译与初始化
    Nginx基础优化
    企业级NginxWeb服务优化实战(下)
    企业级NginxWeb服务优化实战(上)
    Nginx+Keepalived高可用集群应用实践
    bzoj 2141: 排队
    zoj 2112 Dynamic Rankings
    bzoj 3196: Tyvj 1730 二逼平衡树
    bzoj 4004: [JLOI2015]装备购买
    bzoj 2300: [HAOI2011]防线修建
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/10517937.html
Copyright © 2020-2023  润新知