Text 尝试将长标题转换为响应性设计的省略号

我正在设计一个响应迅速的web应用程序，我想用省略号将长文本封装在标题中。我该怎么做？这是一个响应页面（没有固定宽度）

这里有一个例子

有人能帮忙吗

编辑：

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

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

---

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

谁知道你可以直接用CSS处理这个问题？我很惊讶，但请查看

文本溢出

属性。其中一个可能的值是

省略号

看小提琴：

您需要向标题添加三个属性：

.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. */
}

一个很酷的部分是，不需要媒体查询。它已经响应了（请尝试在小提琴中调整窗格的大小）

更新：

刚刚看到你的更新。。。

---

包含元素的宽度可以设置为百分比，甚至100%。然后，

overflow:hidden

和

whitespace:nowrap

可以在子标题元素上发挥它们的魔力。

不幸的是，这对我不起作用，因为标题栏必须平衡两个按钮，并且需要定义最大宽度-请参阅我对上面问题的编辑，我的问题仍然存在。不过，我确实尝试过你的答案，但是因为没有定义最大宽度，所以标题不知道什么时候要剪掉，所以它会延伸到页面之外。啊，我明白了。非常感谢！我有一个问题与手机中的省略号有关。用户如何知道在手机布局中引入省略号的整个标题“我的长项目标题将被打破”呢？这是一个很好的观点。回到2013年，我没有想到UX的这一部分。我想现在我会使用另一种方法，或者如果你喜欢冒险，你可以从左到右动画标题。