P标签中的字母数字内容换行及多行省略 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                width: 200px;
            }
        </style>
    </head>
    <body>
        <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </body>
</html>

上面代码的效果：

上面p中的内容并没有自动换行，如果我们想让它换行应该怎么做：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                width: 200px;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </body>
</html>

效果如下：

可以看到我们加了word-wrap: break-word;就可以换行了

 

那如果我们想让它只显示两行呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                width: 200px;
                word-wrap: break-word;
                text-overflow: ellipsis;
                display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
                -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                -webkit-line-clamp: 2; /** 显示的行数 **/
                overflow: hidden;  /** 隐藏超出的内容 **/
            }
        </style>
    </head>
    <body>
        <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </body>
</html>

效果如下：

 

posted @ 2018-08-23 14:15  GXQ乔i  阅读(437)  评论(0)  编辑  收藏  举报