带有溢出的截止效果：隐藏答案

【问题标题】：Cut off effect with overflow:hidden带有溢出的截止效果：隐藏
【发布时间】：2012-05-05 02:09:04
【问题描述】：

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

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

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

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

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

注意：这里我正在尝试使用表格，我也尝试使用浮动，但这也不起作用。

感谢您的帮助

【问题讨论】：

标签： html css overflow tablelayout

【解决方案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>

【讨论】：

非常感谢，我知道它必须是这样的 -_-

【解决方案2】：

将其配置为显示为 inline-block

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

Demo

【讨论】：

当你调整页面大小时这不会做任何事情：/ 当没有足够的空间显示时，文本应该被截断

【解决方案3】：

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

【讨论】：

这确实是我想要的效果，但我很确定我也可以用一些 css 来“轻松”解决这个问题（不过非常感谢你的努力！如果事实证明我不能在css中做我会用你的解决方案）