文本 – 试图将响应式设计的长标题转换为省略号
发布时间:2020-12-14 18:52:25 所属栏目:资源 来源:网络整理
导读:我正在设计一个响应式的Web应用程序,我想用省略号封装标题中的长文本.我该怎么做?这是一个响应页面(无固定宽度)… 这是一个例子 谁能帮忙? 编辑: 我添加了这样的最大宽度和省略号溢出: max-width: 200px;overflow: hidden;white-space: nowrap;text-over
我正在设计一个响应式的Web应用程序,我想用省略号封装标题中的长文本.我该怎么做?这是一个响应页面(无固定宽度)…
这是一个例子 谁能帮忙? 编辑: 我添加了这样的最大宽度和省略号溢出: max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 但这对我来说不行,因为这里的关键是响应.我没有针对iOS移动浏览器的标题的最大宽度定位,我想要在所有智能手机上放大或缩小最大宽度.有什么建议么? 解决方法
谁知道你可以直接处理这个C??SS?我很惊讶,但检查出文本溢出属性.其中一个可能的值是省略号!
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
看到小提琴:http://jsfiddle.net/PdRqB/ 您需要在标题中添加三个属性: .title { overflow: hidden; /* to hide anything that doesn't fit in the containing element. */ white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */ text-overflow: ellipsis; /* to do what you want. */ } 一个很酷的部分是,不需要媒体查询.它已经响应(尝试调整小提琴中的窗格大小). 更新: 刚刚看到你的更新…您的包含元素的宽度可以设置为百分比,甚至100%.然后,overflow:hidden和white-space:nowrap可以对孩子标题元素做他们的魔法. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |