CSS 实现过长文本省略表现

1、单行省略表现

  CSS 中可以使用 text-overflow 属性和 white-space 属性来实现过长文本省略表现。以下是实现方法：
  

• 设置 overflow 为 hidden，以潜伏超出容器范围的文本。
  

  

• 设置 white-space 为 nowrap，以强制文本在同一行表现。
  

  

• 设置 text-overflow 为 ellipsis，以表现省略号。
  

  代码如下：

1. .ellipsis {
2.    overflow: hidden;
3.    white-space: nowrap;
4.    text-overflow: ellipsis;
5. }

复制代码

该代码在容器宽度有限定的环境下使用，超出容器宽度的文本将被潜伏，并表现省略号。
   2、多行省略表现

  如果必要实现多行省略表现，可以将 overflow 设置为 hidden，white-space 设置为 normal，并使用 max-height 属性限定容器的高度。
  代码如下：

1. .ellipsis-multi-line {
2.    overflow: hidden;
3.    white-space: normal;
4.    text-overflow: ellipsis;
5.    max-height: 60px; /* 设置最大高度 */
6. }

复制代码

  在此代码中，当文本内容高度高出 60px 时，超出部门将被潜伏，并表现省略号。
   

来源：https://blog.csdn.net/yzh648542313/article/details/128899044
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！