CSS设置文本超出显示省略号

一、单行文本显示省略号

    <div class="box">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    </div>

    <style>
        .box p{
         width: 200px;
         display: block;
         text-align: center;
         overflow: hidden;
         text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
         white-space: nowrap;  /* 限制不允许换行 */
        }
     </style>

 

二、限制行数显示省略号

    <div class="box">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    </div>

    <style>
        .box p{
            width: 200px;
            text-align: left;
            display: -webkit-box;  /* 兼容旧版浏览器 */
            -webkit-line-clamp: 2;   /* 显示两行 */
            -webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
            overflow: hidden;
            text-overflow: ellipsis;
        }
     </style>

三、长单词自动换行限制

如果文本中有长单词，在换行时会自动截取整个单词换行

    <div class="box">
        <p>测试文本Changdanci 测试文本Changdanci ChangdanciChangdanci ChangdanciChangdanciChangdanci</p>
    </div>

    <style>
        .box p{
            width: 200px;
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

     </style>

添加 word-break: break-all; 强行截断换行显示，在希望容器内全填充时使用，否则影响单词文案阅读感受。

    <div class="box">
        <p>测试文本Changdanci 测试文本Changdanci ChangdanciChangdanci ChangdanciChangdanciChangdanci</p>
    </div>

    <style>
        .box p{
            width: 200px;
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;  /* 强制截断所有 */
        }
     </style>