表示された内容を視覚的に切り捨てるように幅を設定するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/480722

質問

テーブルの列幅を設定しようとしています。これは、子供の要素が視覚的に切り捨てられるポイントに達するまで正常に動作します...その後、小さくサイズがありません。 （「視覚的に切り捨てられた」 - 何が適合していないかは次の列の後ろに隠されているように見えます）

これが私の問題を示すためのいくつかのサンプルコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

さまざまな方法で幅を設定しようとしました

td1.offsetWidth = td1.currentShrinkCount;

と

td1.width = td1.currentShrinkCount + "px";

と

td1.style.width = td1.currentShrinkCount + "px";

と 

td1.style.posWidth = td1.currentShrinkCount;

と 

td1.scrollWidth = td1.currentShrinkCount;

と 

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

と 

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

と 

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

私はおそらくDivを使用できますが、テーブルがバウンドコントロールから生成されているので、ASP.NETコントロールを書き直したくありません。

そうは言っても、私は最後の溝の努力だと思ったので、少なくとも各 'TD1の内容物をDIVで包むことができ、オーバーフローは物事の世話をしますが、交換さえします

<td id="td1">
    Extra_long_filler_text
</td>

と

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

うまくいきませんでした。

その内容を視覚的に切り捨てるために幅を設定する方法を誰かが知っていますか？

btw-myターゲットブラウザーはIE7です。これは内部アプリであるため、他のブラウザは現在重要ではありません。

役に立ちましたか？

解決

追加してみました table-layout: fixed; に <table> そして、IE7で私のために働きました。

固定テーブルレイアウトでは、水平レイアウトは、テーブルの幅、列の幅、セルの内容にのみ依存します。

チェックアウト ドキュメント.

他のヒント

CSSソリューション

「切り捨て」はあなたが探している言葉ではないかもしれません。あふれる文字を隠したいだけかもしれません。その場合は、CSS-Property「Overflow」を調べてください。これにより、コンテナの宣言された制限を通過するコンテンツを非表示にします。

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

JavaScriptソリューション

実際にコンテナ内のテキストを切り捨てたい場合は、1つの文字を右から削除し、親の幅をテストし、文字を削除し続け、親の幅が宣言された幅と一致するまで親の幅をテストする必要があります。

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

あるべきです 

<td id="td1" style="overflow:hidden;">

Overflow-XはMicrosoft CSS属性であり、現在はCSS3の一部です。古いオーバーフロー属性に固執します。

編集：

Paoloが言及しているように、Table-Layout：修正も追加する必要があります。テーブルの幅を指定します。完全な例が続きます。

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

私の知る限り、テーブルセルは常にその内容に対応するために伸びます。

JavaScriptを使用して、一定量以上のコンテンツを持つテーブルセルのデータを動的に切り捨てたことを考えましたか？または、これをより簡単にサーバー側に行うこともできます。

jqueryまたはslain javaScriptを使用して、divタグを使用してセルの内容を囲み、固定幅とオーバーフローを設定できます。代わりにそれらに隠されます。美しくはありませんが、うまくいきます。

ETA：

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

divは境界要素であるため、幅を設定する必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top