html中省略号怎么设置

在 HTML 中，省略号可以通过 CSS 样式来控制。

不过，在某些情况下，HTML 原生的省略号样式可能更加适合你的需要，它可以在长文字中以省略号的形式隐藏内容。

/* 使用 CSS 来设置省略号 */.ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
     /* 禁止文字换行 */    width: 200px;
 /* 指定元素宽度 */}
/* HTML 原生省略号的设置 */.ellipsis2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
     /* 限制显示行数 */    -webkit-box-orient: vertical;
      /* 设置垂直方向 */    overflow: hidden;
}
    

CSS 中，我们需要在元素上设置 overflow 属性为 hidden，这个属性可以用来控制当元素中内容超过父元素设定的 width 或 height 时如何显示。

然后，我们需要使用 text-overflow 属性来显示省略号。该属性有三个可选值：clip（默认）、ellipsis（省略号）和字符串值。我们把 text-overflow 属性设为 ellipsis 表示我们希望将多余文字以省略号的形式替代。

最后，我们可以使用 white-space 属性来控制文字不换行。这样，在超过设定的元素宽度时，CSS 就会自动使用省略号来代替剩余的内容。

另外，HTML 还有一种省略号的设置方式，它可以限制一个元素显示的行数。在文本非常长时，这种方式会更加方便。

在样式表中，我们使用 display 属性将元素设置为 -webkit-box，这个属性的目的是将元素作为弹性盒子来展示内容。然后，我们使用 -webkit-line-clamp 属性来限制元素显示的行数。-webkit-box-orient 属性则设置元素的方向为垂直方向。

最后，我们需要将元素的 overflow 属性设置为 hidden，以隐藏多余的内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！