具有溢出的截止效果：隱藏

Question

我想在CSS中創建以下內容：

我有一個長文本，應顯示在一行上，並在該文本旁邊顯示一個超鏈接（稍后將其放置在網站的標題中，這就是為什么它必須是一行）。

當屏幕上的空間很小時，我希望字符串被切斷（“ testtest ..”-超鏈接）。 當調整窗口大小並留出更多空間時，我希望顯示文本（盡可能多（例如“ testtesttesttesttesttesttest ..-超鏈接”））。

我遇到的問題是字符串不想被切斷。 它始終保持完整大小。

這是指向JSFiddle的鏈接： http : //jsfiddle.net/PNGDw/1/

注意：在這里我嘗試使用表，也使用浮點數進行嘗試，但這也不起作用。

謝謝您的幫助

Answer 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>

Answer 2

配置它以顯示為內聯塊

.should-cut-off
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
    display: inline-block;
}

演示

Answer 3

我創建了一個修剪文本的javascript函數，並在調整大小時更新了文本。 這是一個演示： http : //jsfiddle.net/HaFzd/3/