2

私はcssにまったく慣れていないので、この問題の解決策を何時間も探していました。サイズ変更可能なコンテナに固定レイアウトテーブルがあります。2つのテキストがあるサイズ変更列があります。最初の列はtext-overflow：ellipseを実行し、2番目の列は常に表示する必要があります（可能な場合）。収まらない場合は、テーブルセルにすべてのテキストを表示するのではなく、最後の5文字を​​表示する必要があります。tdに2つのスパンを入れて、2番目に幅を与えるのは悪いと思いましたが、幅は無視されます。要素をフロートしようとすると（左にフロートすることしかできません。右にフロートすると、テキストがほとんどない長い列の最後に最後の5文字が配置されますが、これは問題ありません）、左ですが、最初のdivが取得されません。小さいので、text-overflow：ellipseは適用されません。

たとえば、tdが短い場合に必要です。

|Hello budd...ight?|

と

|Hello buddy ho...ight?|

しかし、tdが長い場合：

|Hello buddy how is it going tonight?                       |

これはかなり一般的な要件のようですが、どうすればそれを達成できますか？私はJavaScriptを必要としません、それがcssによって解決できると確信しています、そして多分いくつかの余分なdiv ...

私のhtml：

<table style="table-layout:fixed">
<colgroup>
    <col/>
    <col width="200px"/>
</colgroup>
<tr>
    <td>
        <span class="first">Hello buddy how is it going ton</span>
        <span class="second">ight?</span>
    </td>
    <td></td>
</tr>
</table>

私のCSS：

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
    while-space:nowrap;
}

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  border: 1px solid red;   

}
span.second
{
    border: 1px solid green;
}

これを達成する方法はありますか？どんな助けでも大歓迎です。ありがとう

4

1 に答える 1

1

何かを機能させることができたようです...変更されたCSSは次のとおりです。

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/* --- everything below this line is new --- */
    float: left;
    padding-right: 5ex;
    max-width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
span.second
{
    width: 4ex;
    margin-left: -5ex;
    display: inline-block;
}​

互換性: Opera または IE<9 はテストしていません (ただし、MDN には IEが IE8 で導入されたと記載され ているため、IE7 が実行されないことはほぼ保証できます) 。クロム ファイアフォックス IE9
box-sizing

説明：

。最初

float: left;と組み合わせると、両方のスパンが同じ行を使用できるようになります( MOSTフォントdisplay: inline-block;
padding-right: 5ex;で動作し
max-width: 100%;ます) 。 Firefox はプレフィックスなしのバリアントをまだサポートしていないため、プレフィックスを使用してください。 TD
display: inline-block;max-width
box-sizing: border-box;max-width

。2番目

width: 4ex;5ex以下で使用する
margin-left: -5ex;と.secondおかしくなるので、テキスト領域の端まで横にずらします.first

注:exニーズに合わせて値を変更できますが、両方を確認してください。
margin-left== -(padding-right)
width<=padding-right- 0.5

于 2012-12-07T19:00:56.860 に答える