文本换行处理

1. 单行文本换行

• 效果：强制文本单行显示，超出部分显示省略号
  ​
• 核心属性： white-space: nowrap  +  overflow: hidden  +  text-overflow: ellipsis 
  ​
• 代码示例
  .text-nowrap {
  width: 200px;
  white-space: nowrap; /* 强制单行 /
  overflow: hidden;
  text-overflow: ellipsis; / 超出显示省略号 */
  border: 1px solid #ccc;
  }

2. 指定行数换行

• 效果：限制文本显示行数，超出部分隐藏
  ​
• 核心属性： -webkit-line-clamp  控制显示行数
  ​
• 代码示例
  .text-line-clamp {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 指定显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 1px solid #ccc;
  }