微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

怎样让文字超出div后自动隐藏并且显示省略号

php中世界最好的语言
发布： 2018-03-14 10:44:18
原创
3300人浏览过

这次给大家带来怎样让文字超出div后自动隐藏并且显示省略号，文字超出div后自动隐藏并且显示省略号的注意事项有哪些，下面就是实战案例，一起来看一下。

文字超出div后自动加上...
只需要在css中设置如下样式即可：

label{
     width: 25px;   //必须设定宽度
    overflow: hidden;
    text-overflow: ellipsis; //设置文字溢出时
    white-space: nowrap;
    word-break: keep-all;
}
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3阴影的详解

超能文献
超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

超能文献 14
查看详情 超能文献

JavaScript的数组使用集合

怎样用canvas绘制星空,月亮,大地,添加文字

怎样用canvas来绘制弧线和圆

以上就是怎样让文字超出div后自动隐藏并且显示省略号的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：css3阴影的详解 下一篇：input回车触发echarts的legend换行并且显示进度条的方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
HTML输入框内容操作指南：正确使用JavaScript的value属性 本教程详细阐述了在JavaScript中正确设置HTML元素内容的方法。许多开发者误用innerHTML来尝试填充输入框，导致内容无法显示。文章将解释为何innerHTML对无效，并指导读者应使用value属性来有效管理输入字段的文本内容，确保前端交互的预期行为。
2025-11-17 13:26:36
835
AWS Lambda连接MySQL超时：深入解析数据库命名规范引发的隐蔽问题 本教程探讨AWSLambda在连接MySQL并执行数据库操作时遇到的超时问题。尽管表面上连接成功，但由于程序化生成的数据库名称违反了MySQL的命名规范（以数字开头），导致CREATEDATABASE查询静默失败，最终引发Lambda函数超时。文章将详细分析问题根源，并提供通过添加字母前缀来确保数据库名称合规性的解决方案及相关最佳实践。
2025-11-17 13:10:47
872
Node.js后端实现Google OAuth2授权码验证与用户信息获取教程 本教程详细指导如何在Node.js后端安全地验证从前端获取的GoogleOAuth2授权码。我们将涵盖授权码与访问令牌的交换、使用访问令牌获取用户个人资料的流程，并提供基于Express和Axios的完整代码示例，确保后端能够可靠地验证用户身份并获取其详细信息。
2025-11-17 13:06:02
176
React中动态管理Ref数组并实现高效滚动定位 本文旨在提供一种在React应用中高效管理大量DOM引用（Ref）的策略，以替代重复的useRef声明和冗余的switch语句。通过将多个Ref存储在一个Ref数组中，我们可以实现动态地访问和操作特定元素，如滚动到指定视图，从而显著提升代码的可维护性、可扩展性和简洁性。
2025-11-17 13:00:09
129
深入解析Redocly CLI：构建包含授权信息的本地API文档 本文旨在解决Redoc在加载受授权保护的APIschema时遇到的挑战。通过详细阐述如何利用RedoclyCLI工具，在本地预先生成完整的API文档HTML文件，从而规避浏览器端授权请求的限制。这种方法允许开发者在有权限的环境中获取APIschema，并将其转换为静态文档，最终实现无缝部署和访问，无需客户端再次进行授权验证。
2025-11-17 12:44:02
185
React中将带编号的多行字符串渲染为HTML有序列表的教程 本教程详细介绍了如何在React应用中，将包含换行符和编号项的多行字符串高效地转换为结构化的HTML有序列表。通过字符串分割、数组映射和动态创建元素，并结合正则表达式去除编号前缀，确保内容以清晰、语义化的方式展示在用户界面中，提升用户体验和页面可访问性。
2025-11-17 12:39:28
892
Redoc静态文档生成：解决受保护API Schema访问问题 本教程旨在解决Redocstandalone在加载需要认证的远程APIschema时遇到的授权问题。通过介绍redoclybuild-docs命令行工具，我们展示了如何预先下载受保护的APIschema并在本地生成静态HTML文档，从而避免了Redoc客户端直接访问带有授权限制的远程资源，实现了文档的离线展示和便捷部署。
2025-11-17 12:36:14
119
React中高效管理与滚动多个Ref：告别冗余useRef与switch 本教程将探讨在React应用中如何优化对多个DOM元素的引用管理。针对传统上使用多个useRef和switch语句处理动态元素交互的低效问题，我们将介绍一种基于useRef结合createRef数组的解决方案，实现更简洁、可扩展且易于维护的Ref管理与元素滚动逻辑。
2025-11-17 12:34:30
678
高效实现HTML表单文件上传至Node.js应用教程 本教程详细指导如何构建一个完整的Web文件上传系统，涵盖HTML表单配置、Node.js服务器端（Express和Multer）处理以及客户端JavaScript（FetchAPI）提交逻辑。文章将重点解决常见的配置错误，如表单提交方式、Multer字段名不匹配等，确保用户能成功从前端上传文件至服务器指定目录。
2025-11-17 12:31:00
1002
理解JavaScript中的标签模板字面量_javascript es6 标签模板是JavaScript中通过函数自定义处理模板字符串的机制，语法为函数名后接模板字符串，函数接收静态文本数组和表达式值数组，可实现HTML安全输出、国际化、SQL构造等场景，结合raw属性还能获取原始字符串内容。
2025-11-17 12:25:02
571
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部