首页 前端知识 CSS设置文本超出显示省略号

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

2024-11-02 10:11:40 前端知识 前端哥 845 834 我要收藏

一、单行文本显示省略号

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19758.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!