css 多行文本超出省略号显示

CSS 多行文本超出省略号显示是一种常见的样式效果，使用预定义的 CSS 属性可以轻松实现这种效果。

在 HTML 中，使用 p> 标签表示段落，将文本包含在其中。下面是一个例子：

p>
    这是一个长长的文本段落，它超出了容器的边界。/p>
    

如果希望这个段落文字超出一定长度之后显示省略号，则可以使用 text-overflow 属性。该属性只能用于单行文本，对于多行文本，需要结合 display 和 -webkit-box 属性。

style>
  p {
        width: 200px;
     /* 设置段落宽度，用于控制文本是否超出容器边界 */    overflow: hidden;
     /* 隐藏超出容器的文本 */    text-overflow: ellipsis;
     /* 超出文本使用省略号显示 */    white-space: nowrap;
     /* 禁止换行 */    display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
 /* 显示文本行数，例如 3 表示显示三行 */  }
    /style>
    p>
    这是一个长长的文本段落，它超出了容器的边界。这是一个长长的文本段落，它超出了容器的边界。这是一个长长的文本段落，它超出了容器的边界。这是一个长长的文本段落，它超出了容器的边界。/p>
    

在上面的 CSS 代码中，-webkit-box 属性指定了使用 WebKit 内核的浏览器显示的文本行数，并通过 -webkit-line-clamp 属性控制了文本的显示行数。在非 WebKit 内核的浏览器中，需要使用 line-height 和 height 实现类似的效果。

总之，使用这些 CSS 属性和预定义值可以轻松实现多行文本超出省略号显示的效果，根据实际需求选择适合的方法即可。

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