html - 溢出时切断效果 :hidden

Question

我想在 css 中创建以下内容:

我有一个应该显示在单行上的长文本，该文本旁边有一个超链接(稍后将放置在网站的标题中，这就是为什么它需要单行)。

当屏幕上的空间很小时，我希望字符串被切断(“testtest..” - 超链接)。当窗口调整大小时有更多空间时，我希望显示文本(尽可能多(例如“testtesttesttesttesttesttest.. - 超链接”)。

我遇到的问题是字符串不想被截断。它始终保持完整大小。

这是 JSFiddle 的链接:http://jsfiddle.net/PNGDw/1/

注意:这里我用表格试了一下，我也试过用 float ，但也没用。

感谢帮助

Answer 1

你在 table 上有一个 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>