css文本篇--文本省略(单行/多行)

css文本篇–文本省略(单行/多行)

1.单行文本溢出省略

.container {  
  width: 200px; /* 设置容器宽度 */  
  white-space: nowrap; /* 防止文本换行 */  
  overflow: hidden; /* 文本溢出容器时隐藏 */  
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */  
}

2.多行文本溢出省略

.container {  
  display: -webkit-box; /* 显示多行文本容器 */  
  -webkit-box-orient: vertical; /* 垂直显示 */  
  -webkit-line-clamp: 3; /* 限制显示3行文本 */  
  overflow: hidden; /* 隐藏超出容器的文本 */  
}