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

✅ 常见写法

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

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 中被换行符或标签中断?
相关推荐
芜青6 分钟前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX24 分钟前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷1 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技2 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马2 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
unfetteredman2 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵2 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗2 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris3 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api
pepedd8643 小时前
LangChain:大模型开发框架的全方位解析与实践
前端·llm·trae