2

非常に長い説明を使用可能なテーブル列幅に短縮したいと考えています。列幅の情報をピクセル単位で持っています。ここで、この測定値を文字数に変換したいので、テキストを指定された数に短縮できます。

私は 100% 正しいとは限りません。ほぼ仮定でも機能します。

4

4 に答える 4

2

彼が話している CSS プロパティは「text-overflow」です。

要素のクラスに次を追加してみてください。すべて必須です。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
于 2012-01-13T20:10:08.243 に答える
2

セル内のテキストを DIV で囲みます。これにより、DIV 内のテキストがセルより大きいかどうかがわかります。

<div id='test' style='width:200px;height:100px;overflow:hidden'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<script type="text/javascript">
alert($('test').scrollHeight)
</script>

単語の末尾を切り捨てて省略記号 (...) を追加する場合は、スクリプトで、高さがコンテナー以下になるまで単語の削除を開始できます。( $ ショートカットにはProtoypeを使用しています)

これが実際の例です：

<div id='test' style='width:300px;height:100px;overflow:hidden'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<script type="text/javascript">
function shorten(element) { 
    if($(element).scrollHeight>$(element).getHeight()) {
        var myText = $(element).innerHTML.split(" ")
        myText.length=myText.length-2
        $(element).update(myText.join(" ")+" ...")
        window.setTimeout('shorten("'+element+'")',1)
    }

}
shorten('test')
</script>

スペースの代わりにピリオドで分割することで文を処理できますが、ピリオドが見つからない場合、または切り捨て後に残ったものが短すぎる場合は、フォールバックが必要になります。

于 2008-12-05T20:51:50.913 に答える
1

私はjquery 1.4.2を使用していますが、以前の回答では問題は解決しませんでしたが、助けになりました..ここにいくつかの小さな調整を加えたコードがあります。コンテナーには高さを固定し、オーバーフローを非表示にする必要があることに注意してください。

p#descr1 { height:46px; overflow:hidden; }

<script type="text/javascript">

    function shorten(element) {
        if ($(element).attr('scrollHeight') > $(element).height()) {
            var myText = $(element).text().split(" ")
            myText.length = myText.length - 2
            $(element).html(myText.join(" ") + " ...")
            window.setTimeout('shorten("' + element + '")', 1)
        }
    }

    $(document).ready(function () {
        shorten('#descr1'); // the id of the container

    });

</script>
于 2010-12-01T15:26:24.310 に答える
0

これはウェブ用ですか？もしそうなら、css を使用してオーバーフローを非表示にするなど、より単純な方法を使用してみませんか?

于 2008-12-05T20:42:13.613 に答える