HTML中实现文本溢出显示省略号-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45648136/article/details/110825708

本文介绍了在HTML中如何对长段落文本进行溢出处理，包括单行文本和多行文本的省略号显示方法，帮助读者掌握网页布局中的文字展示技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.单行文本溢出进行省略号处理

<html>
<head>
<style>
       .txt{
           width:225px;/*设置段落长度*/
           white-space:nowrap;/*文本段落不换行*/
           overflow:hidden;/*超出范围的隐藏*/
           text-overflow:ellipsis;/*对文本溢出进行省略号处理*/
        }
</style>
</head>

<body>
  <p class="txt">本例中的样式表把段落元素设置为内联元素。本例活动时间发货时间卡拉风华绝代撒合肥尽快</p>
</body>
</html>

结果：
在这里插入图片描述

2.多行文本溢出进行省略号处理

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
       .txt{
        width: 225px;
        overflow:hidden;              /*溢出的隐藏*/
        text-overflow: ellipsis;      /*对溢出的进行省略号处理*/
        display:-webkit-box;          /*将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp:2;		  /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数*/
        -webkit-box-orient:vertical;  /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
        }
    </style>
    
</head>
<body>
    <p class="txt">本例中的样式表把段落元素设置为内联元素。本例活动时间发货时间卡拉风华绝代撒合肥尽快</p>
    
</body>
</html>