html - 具有溢出效果:隐藏

我想在css中创建以下内容：
我有一个很长的文本，应该显示在一行上，并且在文本旁边有一个超链接（这将稍后放置在网站的标题中，这就是为什么它需要是一行）。
当屏幕上的空间很小时，我希望将字符串截断（“testtest…”“-hyperlink）。当窗口大小调整且空间较大时，我希望显示文本（尽可能多地显示文本（例如“testtesttesttesttesttesttesttest。。-超链接“）。
我的问题是绳子不想被切断。它总是保持原样。
这里有一个到JSFiddle的链接：http://jsfiddle.net/PNGDw/1/
注意：这里我试着用一张桌子，我也试过用漂浮物，但也没用。
谢谢你的帮助

最佳答案

您的桌子有5em宽，所以它不会调整大小。使用类似于：

<style>
    *
    {
        margin: 0;
        padding: 0;
    }

    body
    {
        background: #5e8834;
    }

    div.wrapper        {
        background: #456326;
        border: 3px solid #547a2f;
        margin: 2em;
        width: 100%;
    }
    div.contents{    display:inline-block;}
    .should-cut-off
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70%;
    }
</style>
<div id='wrapper'>
    <div class="should-cut-off contents">Test - test - test - Test - test - test - Test - test - test - Test - test - test
            - Test - test - test
    </div>
    <div class='contents' style="width:15%;">
        <a href="#">[this is a link]</a>
    </div>
</div>

关于html - 具有溢出效果:隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10297909/