2

cssで以下を作成したいと思います。

1行に表示する必要のある長いテキストと、このテキストの横にあるハイパーリンクがあります（これは後でWebサイトのヘッダーに配置されるため、1行にする必要があります）。

画面にスペースがほとんどない場合は、文字列を切り取ります（ "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

インラインブロックとして表示するように構成します

.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 に答える