在流体容器中连接文本

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%;

请参阅修改过的小提琴：http://jsfiddle.net/blocknotes/jguaxbsg/2/

如果窗口上有足够的空间，您可以看到整个句子，如果限制窗口，则省略号会显示为剪切字符串。