设置单行省略号后不生效?你肯定忘记了这几点!

✅ 常见写法

下面这段样式是单行省略号的标准写法,理论上是没问题的:

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 中被换行符或标签中断?
相关推荐
猫头_23 分钟前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
天生我材必有用_吴用26 分钟前
网页接入弹窗客服功能的完整实现(Vue3 + WebSocket预备方案)
前端
海拥32 分钟前
8 Ball Pool:在浏览器里打一局酣畅淋漓的桌球!
前端
Cache技术分享39 分钟前
148. Java Lambda 表达式 - 捕获局部变量
前端·后端
YGY Webgis糕手之路44 分钟前
Cesium 快速入门(二)底图更换
前端·经验分享·笔记·vue
神仙别闹1 小时前
基于JSP+MySQL 实现(Web)毕业设计题目收集系统
java·前端·mysql
前端李二牛1 小时前
Web字体使用最佳实践
前端·http
YGY_Webgis糕手之路1 小时前
Cesium 快速入门(六)实体类型介绍
前端·gis·cesium
Jacob02341 小时前
UI 代码不写也行?我用 MCP Server 和 ShadCN 自动生成前端界面
前端·llm·ai编程
爱泡脚的鸡腿1 小时前
Vue第五次笔记
前端·vue.js