✅ 常见写法
下面这段样式是单行省略号的标准写法,理论上是没问题的:
css
.slh {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但它生效必须满足下面两个条件
✅ 条件一:display
是块级或内联块级元素(不是默认 inline
)
css
display: block; /* 或 inline-block、flex、grid 均可 */
✅ 条件二:必须有明确的最大宽度 或宽度
css
max-width: 100%; /* 或具体宽度 */
width: 200px;
🔍 举个不生效的例子
html
<span class="slh">这是一段非常非常非常非常非常非常非常非常长的文字</span>
没有设置 width
,就会被隐藏但不会出现 ...
。
✅ 正确示例
html
<div class="slh">这是一段非常非常非常非常非常非常非常非常长的文字</div>
css
.slh {
display: block;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
🛠 实用建议(改进你的类)
你可以这样增强你的类:
css
.slh {
display: inline-block; /* 更通用 */
max-width: 100%; /* 不破坏布局 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后只需保证你的容器设置了宽度限制(如表格列、卡片内容等),它就能稳定工作。
❓如果你仍然发现不生效
可以检查以下几点:
- 元素是否真的套用了
.slh
类?[笑] overflow: hidden
是否被其他样式覆盖?- 父元素是否设置了
display: flex
且对齐方式不当? flex容器
中不妨给你这个需要省略的内容加上flex:1;min-width:0
试试?- 文本本身是否在 HTML 中被换行符或标签中断?