html – 将“text-overflow:ellipsis;”应用于内部div
发布时间:2020-12-14 23:28:52 所属栏目:资源 来源:网络整理
导读:我有一个类似于下图的div结构. 我需要应用“文本溢出:省略号”;在较小的窗口中在这个div结构中发短信.(图2) 但它并没有像我预期的那样适用.这是我的HTML代码 .header {height: 60px;width: 100%;}.header .header_middle {margin: 0 auto;width: 100%;}.hea
我有一个类似于下图的div结构.
我需要应用“文本溢出:省略号”;在较小的窗口中在这个div结构中发短信.(图2) 但它并没有像我预期的那样适用.这是我的HTML代码 .header { height: 60px; width: 100%; } .header > .header_middle { margin: 0 auto; width: 100%; } .header > .header_middle.share-file-header > .caption { float: left !important; line-height: 60px; overflow: hidden; padding-right: 0 !important; text-overflow: ellipsis; white-space: nowrap; padding: 0 30px; } .header > .header_middle.share-file-header .settings { line-height: inherit; padding: 0 15px 0 0; float: right; height: 60px; position: relative; } .shared-person-detail-wrapper { display: inline-block; overflow: hidden; text-overflow: ellipsis; line-height: inherit; } .settings .share-files-msg,.settings .shared-person { display: block; font-size: 14px; text-overflow: ellipsis; } .settings .more-persons-wraper { display: inline-block; position: relative; } <div class="header"> <div class="header_middle share-file-header"> <div class="caption"> <p> <a href="/"> <img src="/resources/Image1.png" alt="Image 1" title="Image 1"> </a> </p> </div> <div class="settings"> <div class="shared-person-detail-wrapper"> <div class="shared-person"> User Name <a href="mailto:user@email.com">(user@email.com)</a> </div> <div class="share-files-msg"> has shared file(s) with you <div class="more-persons-wraper">and some <a href="#" data-toggle="dropdown" id="more">more</a> people. <ul class="dropdown-menu pull-right" id="more-persons"> <li>user1@email.com</li> </ul> </div> </div> </div> <div class="share-icon"><img src="/resources/Image2.png" alt="Image 2" title="Image 2"></div> </div> </div> </div> 这段代码有什么问题,任何人都可以给我一个指南吗?谢谢 解决方法
为了使元素具有溢出作为省略号,您需要在其上设置这些CSS规则:
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 60px; #(any width would do) 这是一个jsfiddle,我在.shared-person类中添加了这些. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 详解jQuery停止动画――stop()方法的使用
- html – 是否可以在Chrome Developer Tools Elements面板中
- 基于jquery实现导航菜单高亮显示(两种方法)
- 将Web窗体迁移到ASP.NET Core MVC的最佳实践
- javascript – 使用Puppeteer,Mocha和Chai在html标记属性中
- web-server – 在拥有Nginx,FastCGI和MySQL的Ubuntu Server
- html – 为什么我的图像和包含框之间有差距?
- jquery ajax提交表单数据的两种实现方法
- 由于空的html / css对齐问题.是什么让我的内容下移?
- html – 键入文本输入是非常慢的iPad mini与iOS8手机Safari