HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了文本 – 试图将响应式设计的长标题转换为省略号大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在设计一个响应式的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可以对孩子标题元素做他们的魔法.

大佬总结

以上是大佬教程为你收集整理的文本 – 试图将响应式设计的长标题转换为省略号全部内容,希望文章能够帮你解决文本 – 试图将响应式设计的长标题转换为省略号所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: