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;
    }
    
        
    

      

  • 相关阅读:
    "rm f xxx"不起作用? 还是需要确认删除?
    (转)C# 3.0语言的新特性——Lambda表达式
    (转)依赖注入的思想(目前见过最好的对DI的描述)
    #import、#include、#import<>和#import””的区别
    Cocoa设计模式之委托
    详解MAC硬盘中各个文件夹
    Cocoa设计模式之单例
    ObjecticeC之关联对象
    UDID被禁用后的集中替代品
    Cocoa设计模式之KVO
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/10517937.html
Copyright © 2011-2022 走看看