Html 带溢出的截断效果：隐藏

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

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

当屏幕上几乎没有空间时，我希望字符串被切断（“testtest…””-hyperlink）。当窗口调整大小并且有更多空间时，我希望显示文本（尽可能多（例如“testtest..-hyperlink”）

我遇到的问题是，绳子不想被切断。它总是保持完整的尺寸

以下是指向JSFIDLE的链接：

注意：在这里，我试着用一张桌子，我也试过用浮子，但那也不起作用

---

感谢您的帮助

将其配置为显示为内联块

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

---

将其配置为显示为内联块

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

---

我创建了一个javascript函数，用于修剪文本，并在调整大小时更新文本。下面是一个演示：

我创建了一个javascript函数，用于修剪文本，并在调整大小时更新文本。下面是一个演示：

您的表上有一个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>

*
{
保证金：0；
填充：0；
}
身体
{
背景#5e8834；
}
分区包装器{
背景#456326；
边框：3px实心#547a2f；
边缘：2米；
宽度：100%；
}
目录{显示：内联块；}
.应该切断
{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
宽度：70%；
}
测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试
-测试-测试-测试

桌子上的宽度为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>

*
{
保证金：0；
填充：0；
}
身体
{
背景#5e8834；
}
分区包装器{
背景#456326；
边框：3px实心#547a2f；
边缘：2米；
宽度：100%；
}
目录{显示：内联块；}
.应该切断
{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
宽度：70%；
}
测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试-测试
-测试-测试-测试

当你调整页面大小时，这没有任何作用：/当没有足够的空间显示时，文本应该被剪掉。当你调整页面大小时，这没有任何作用：/当没有足够的空间显示时，文本应该被剪掉。这确实是我想要的效果，但我非常确定我也可以用一些css“轻松”解决这个问题（非常感谢您的努力！如果结果证明我不能在css中完成，我将使用您的解决方案）这确实是我想要的效果，但我非常确定我也可以用一些css“轻松”解决这个问题（非常感谢您的努力！如果结果证明我不能在css中完成，我将使用您的解决方案）非常感谢，我知道一定是那样的-非常感谢，我知道一定是那样的-_-