2

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

我有一个应该显示在单行上的长文本，以及该文本旁边的超链接（稍后将放置在网站的标题中，这就是它需要单行的原因）。

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

我遇到的问题是字符串不想被切断。它始终保持完整尺寸。

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

注意：这里我正在用桌子尝试它，我也用花车尝试过，但这也没有用。

谢谢您的帮助

4

3 回答 3

2

你的桌子上有 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>
于 2012-04-24T12:57:59.620 回答
1

将其配置为显示为 inline-block

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

演示

于 2012-04-24T12:48:08.230 回答
1

我创建了一个修剪文本的 javascript 函数，并且我正在调整调整大小时更新文本。这是一个演示：http: //jsfiddle.net/HaFzd/3/

于 2012-04-24T12:49:47.127 回答