Question

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

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

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

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

以下是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;
}

Demo

Answer 3

我已经创建了一个修剪文本的javascript函数，我正在调整resize上的文本。这是一个演示：http://jsfiddle.net/HaFzd/3/

溢出切断效果：隐藏

3 个答案: