html - 连接流体容器中的文本

Question

这是一个最初源自那个问题的问题:Header misbehave on longer title

我现在正在使用:

    .toolong {
        width: 230px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
    }

使用 @media (min-max width etc.) 并且我希望它使宽度适应容器的实际宽度，而不是屏幕宽度。这是为什么？因为在 768px 下，我已经堆叠了所有的列，容器变得很长，有很多未使用的空间:

如何正确处理这个问题？

Answer 1

你可以简单地设置:

width: 100%;

查看修改后的 Fiddle:http://jsfiddle.net/blocknotes/jguaxbsg/2/

如果窗口上有足够的空间，您可以看到整个句子，如果您限制窗口，则会出现省略号来截断字符串。