CSS文字溢出换行技巧全解析

• word-wrap: break-word; 允许长单词或 URL 断行
• white-space: normal; 允许文本换行（默认行为）
• overflow: hidden; 防止内容溢出容器

.text {
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
  overflow: hidden;
}

• white-space: nowrap; 强制不换行
• overflow: hidden; 超出隐藏
• text-overflow: ellipsis; 显示省略号

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

• display: -webkit-box;
• -webkit-line-clamp: 2; 限制行数
• -webkit-box-orient: vertical;

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .multi-line {
    -webkit-line-clamp: 1; /* 小屏只显示一行 */
  }
}
<p>@media (min-width: 769px) {
.multi-line {
-webkit-line-clamp: 3; /<em> 大屏显示三行 </em>/
}
}</p>