text - Trying to turn long title in to ellipsis on responsive design

Question

I'm designing a responsive web app, and I'd like to encapsulate long text in the title with an ellipsis. How can I do this? It's a responsive page (no fixed-width)...

Here is an example

Can anyone help?

Edit:

I added a max-width and an ellipsis overflow like this:

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

But this won't work for me because the key here is responsiveness. I don't to target the max-width of the title specifically for iOS mobile browsers, I want the max-width to enlarge or reduce on all smart phones. Any suggestions?

Answer 1

谁知道你可以直接用 CSS 处理这个？我很惊讶，但检查了text-overflow财产。可能的值之一是ellipsis！https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

见小提琴：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. */
}

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

更新：

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