几个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{
            width: 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;
}

　　

 

posted on 2019-03-12 17:01  Diamond_xx  阅读(154)  评论(0)    收藏  举报

导航