zoukankan      html  css  js  c++  java
  • 几个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;
    }
    
        
    

      

  • 相关阅读:
    css(完)
    HTML学习(完)
    leetcode学习03
    多线程详解2(完)
    windows7 64位下安装apache和php
    一个js,记录方便查询。
    用了锚的时候,有的层被覆盖了。
    日,在ie10下面hover里不能控制table
    在实现tab的时候,margin-bottom:-1px无效的问题
    javascript中,在一个类里attache的event事件中,如果调用类的成员变量和方法
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/10517937.html
Copyright © 2011-2022 走看看