text - 尝试将长标题变成响应式设计的省略号

Question

我正在设计一个响应式 Web 应用程序，我想用省略号在标题中封装长文本。我怎样才能做到这一点？这是一个响应式页面(没有固定宽度)...

这是一个例子



任何人都可以帮忙吗？

编辑:

我添加了一个最大宽度和一个省略号溢出，如下所示:

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

但这对我不起作用，因为这里的关键是响应能力。我不针对 iOS 移动浏览器专门针对标题的最大宽度，我希望最大宽度在所有智能手机上放大或缩小。有什么建议？

Answer 1

谁知道你可以用直接的 CSS 来处理这个问题？我很惊讶，但请查看 text-overflow属性(property)。可能的值之一是 ellipsis ! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

见 fiddle :http://jsfiddle.net/PdRqB/

您需要在标题中添加三个属性:

.title {
    width: 100px; /* Need to specify a width (can be any unit). overflow: hidden does nothing unless the width of .title is less than the width of the containing content */
    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. */
}

一个很酷的部分是，不需要媒体查询。它已经响应(尝试调整 fiddle 中的 Pane 大小)。

更新:

刚看到你的更新...
包含元素的宽度可以设置为百分比，甚至 100%。然后， overflow: hidden和 white-space: nowrap可以对子标题元素施展魔法。