0

これは簡単な作業のように見えましたが、とにかく難しいことがわかりました。

1 行 2 列のテーブル。テーブル幅は 100% とする。

列 1: 長いテキストが含まれる場合があります。1 行のみで表示し、はみ出したテキストは切り取ります。この列の幅は、テーブル全体の幅から列 2 の幅を差し引いたものとします。

列 2: 右の列の幅は、テキストが正確に収まるようにする必要があります。テキストは右揃えにする必要があります。

つまり、2 列目のテキストが 2 つの列の幅を定義します。

1 列目と 2 列目のテキストは動的であるため、絶対幅は機能しません。テーブル全体の幅はブラウザー ウィンドウの幅であり、これはモバイル ブラウザーを含む最新のすべてのブラウザーで機能する必要があります。

テーブルを使用しようとしましたが、div のみを使用しようとしました。どちらのアプローチも有望に見えますが、まだ完全には解決していません。

これが私が試したサンプルコードです: (問題: ブラウザが狭いとテーブルが 100% 以上広くなります)。

<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

それに付随するいくつかのCSS：

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }

div: (問題: 列 2 が列 1 の下に捨てられている)

<div class="div1">

    <div class="div2">
        This is a very long text in a div tag. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>

それに付随するいくつかのCSS：

    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

これは私には難しい問題のように見えます。誰でも良い解決策を見つけることができますか?

アップデート：

ここに html ファイル全体を示します。誰でも簡単に試すことができます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }
</style>

</head>
<body>

<div class="div1">

    <div class="div2">
        This is a very long text. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>
<br/><br/><br/>
<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

</body>
</html>
4

2 に答える 2

0

これはオプションですか？

<div style="position:relative;white-space:nowrap;overflow:hidden;">This is a table. This is a very long text. Does it get clipped?
    <div style="position:absolute;right:0;top:0;background:white;padding-left:5px;">SHOW THIS</div>
</div>
于 2014-01-04T19:45:57.847 に答える
0

div レイアウトの使用:

フィドル

マークアップ:

<div class="div3">
    SHOW THIS
</div>
<div class="div2">
    This is a very long text. Does it get clipped?
</div>

CSS

.div2 {
    overflow: hidden;
    white-space: nowrap;
}
.div3
{
    float:right;
}
于 2014-01-04T20:34:43.470 に答える