1. **单行截断并省略号展示：**
CSS中的`text-overflow: ellipsis;`配合 `white-space: nowrap; overflow:hidden;`可以实现在一行内显示文本，并且如果文字过长则以省略号（...）表示：
css
.container {
width: 200px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
2. **多行文本裁剪加省略号结尾**：
对于需要折行但总体高度受限的情况，则需借助Webkit浏览器私有前缀 `-webkit-line-clamp` 和 `-webkit-box-orient` 属性结合使用:
css
.container {
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.5em; /* 根据实际需求调整 */
max-height: 6em; /* 控制最大展示的高度 */
overflow: hidden;
&::-webkit-scrollbar {
display: none; /* 可选隐藏滚动条 */
}
-webkit-line-clamp: 4; /* 指定最多几行后出现省略号 */
text-overflow: ellipsis;
}
/* 针对非WebKit环境或未来无须依赖私有API的方式，可能需要用到JS辅助控制或者伪元素模拟等复杂技术手段 */
3. **自定义末尾符号**: 虽然默认情况下是三个点(...)作为结束符，但实际上我们可以通过一些技巧利用`:after`伪类来自定义这个字符：
css
.text-truncate-with-custom-symbol::before{
content:'[...]';
position:absolute;
right:0;
bottom:0;
z-index:-1;
background:white;/* 如果背景不是白色，请替换为对应的颜色遮盖原生省略号*/
pointer-events:none;
/* 下面样式请按实际情况微调位置、大小以及颜色等 */
padding-left:.8rem;
font-size:.9em;
color:#aaa;
}
以上几种方式基本覆盖了大部分场景下对于文本超出容器情况下的解决方案。然而需要注意的是，在跨平台兼容性和响应式布局上还需要额外关注不同设备和浏览器之间的差异性表现，适时引入JavaScript进行补充处理或是采用现代框架提供的相应功能组件达到更理想的适配效果。同时随着Flexbox与Grid布局的发展和完善，通过合理配置container本身的尺寸约束也可以从源头减少此类问题的发生几率。
标签： css3文字超出
