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

Posted 2020-12-31 gxqi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

效果如下：

技术分享图片

以上是关于P标签中的字母数字内容换行及多行省略的主要内容，如果未能解决你的问题，请参考以下文章

如何让textarea中输入多行的数据在p标签中换行？

CSS自动换行强制不换行强制断行超出显示省略号

自定义 TableViewCell 中的标签不能是多行或换行

跨平台应用开发进阶(五十一)：HTML5（富文本内容）连续数字字母不自动换行问题分析及解决