前端技巧|样式设置|css省略号怎么写，css文本溢出显示省略号的方法

🔍 前端技巧：CSS省略号写法大全

💡 核心关键词：

1. 单行文本溢出省略号

   

   .ellipsis {  
     white-space: nowrap;      /* 禁止换行 */  
     overflow: hidden;         /* 隐藏溢出内容 */  
     text-overflow: ellipsis; /* 显示省略号 */  
   }  

2. 多行文本溢出省略号（兼容性需注意）

   .multi-line {  
     display: -webkit-box;            /* 旧版Flex布局 */  
     -webkit-line-clamp: 3;           /* 限制行数 */  
     -webkit-box-orient: vertical;    /* 垂直排列 */  
     overflow: hidden;                /* 隐藏溢出 */  
   }  

3. 表格单元格省略号

   td {  
     max-width: 100px;  
     white-space: nowrap;  
     overflow: hidden;  
     text-overflow: ellipsis;  
   }  

🎨 样式设置小贴士：

• 确保父容器有固定宽度或 max-width 📏
• 使用 word-break: break-all; 处理长单词换行问题 🔠
• 移动端适配可搭配 @media 查询调整行数 📱

✨ 趣味场景：

• 用户评论太长？ 优雅截断！ 超长？ellipsis 来拯救！

📅 信息参考：2025-07 前端社区最佳实践