1

I am looking for a way to use CSS to trim long content from a table cell. For example. say a given cell contains content which is way too long. The width of the table is adjusted to fit this really long content. However, since the table already consumes 100% width, a lot of the table spills out side of the window to fit this content.

So, my question is, is there a way that I can use CSS (preferably < CSS3 for better IE compatibility) to show text in a table cell up to the cell's width, then hide any overflow with out pushing out the width of the table?

4

2 に答える 2

2

これがクロスブラウザソリューションです。

これをCSSに追加します。

/** Custom CSS logic to truncate text with ellipsis **/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');
}

このファイル（ellipsis.xml）をサーバー（この場合は/ Assets / xml /）に追加します。

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text">
                    <children/>
                </xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

次に、オーバーフロー時に切り捨てが必要なDOMノードにクラスを追加します。

<div class="ellipsis">....
于 2011-07-04T07:34:43.887 に答える
0

これは、Firefoxを除くすべてのブラウザでサポートされています（私は思います）。Elipsisは、切り捨てられたテキストで...を生成し、クリップはテキストをクリップするだけです...

td {text-overflow：ellipsis; / *またはtext-overflow：clip; * /}

于 2011-07-04T04:01:12.473 に答える