7

ページに次のコンテンツDIVがあり、動的テキストが表示されます。

<div id="someContent">
</div>

次のCSSを使用して、追加のテキストを切り取ります。

#someContent {
    height: 200px;
    width: 200px;
    overflow: hidden;
}

このテキストをDIVにロードすると、次のようになります。

"Lorem ipsum dolor sit amet、consectetuer adipiscingelit。Praesentaliquam、justo convallis luctus rut​​rum、erat nulla fermentum diam、at nonummy quam anteacquam。Maecenasurnapurus、fermentum id、molestie in、commodo porttitor、felis。 lacus。Quisqueornarerisusquisligula。Phasellustristiquepurus a augue condimentumadipiscing。Aeneansagittis。Etiamleopede、rhoncus venenatis、tristique in、vulputate at、odio。Donecet ipsum et sapienvehiculanonummy。Suspen

... CSSにより、次のテキストのみがDIVに表示されます。

"Lorem ipsum dolor sit amet、consectetuer adipiscingelit。Praesentaliquam、justo convallis luctus rut​​rum、erat nulla fermentum diam、at nonummy quam anteacquam。Maecenasurnapurus、fermentum id、molestie in、commodo porttitor、felis。 lacus。Quisqueornarerisusquisligula。Phasellustristiquepurusaaugue」

これは期待どおりに機能します。

しかし、JavaScriptを使って表示されたテキストにアクセスできる方法があるのではないかと思っていました。DIVのプロパティにアクセスしようとすると、innerHTML元々DIVにロードされていたテキスト全体が返されます。

<script type="text/javascript">
    alert(document.getElementById("mainArticleContent").innerHTML);
</script>

私の最終目標は、トリミングされたコンテンツの最後の単語を省略記号（ "..."）に置き換えることです。これはJavaScriptで実行できるので、CSSプロパティのように、IEだけでなくすべてのブラウザーで表示できると思いましたtext-overflow: hidden。

何か案は？これは可能ですか？

4

7 に答える 7

3

あなたが求めていることはjavascriptでは不可能だと思います。

または、サーバー側の特定の文字数でテキストを切り捨ててみませんか？選択したフォントによっては、ページに表示されるdivのサイズを適切に制御できない可能性がありますが、問題は解決するはずです。

編集：

自動CSS省略記号を取得するには、これを見てください。いくつかの注意点があり、ブラウザ固有のように見えますが、これはあなたが望むことを行う別の方法です。

于 2009-04-22T14:07:37.887 に答える
2

jQuery を使用した簡単な考えを次に示します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var innerText = $('#someContent').text();
    var textArray = innerText.split('');
    var formatted = '';
    for(var i in textArray) {
        formatted += '<span>' + textArray[i] + '</span>';
    }
    var heightOfContainer = $('#someContent').height();
    $('#someContent').html(formatted);
    var clipped = '';
    $('#someContent span').each(function(){
        if ($(this).position().top < heightOfContainer) {
            clipped += $(this).text();
        } else {
            return false;
        }
    });
    clipped += '...';
    $('#someContent').html(clipped);
});
</script>
于 2009-04-22T14:37:55.363 に答える
2

このサイトでは、テキストの表示部分を取得するのに役立つテクニックについて説明しています。この方法がどれほど正確かはわかりませんが、必要なものにかなり近づくと思います: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with -dots-via-javascript

于 2009-04-22T14:16:19.143 に答える
1

それを行う簡単な方法はありません。div サイズ、フォント サイズ、フォント タイプ、および div 内のテキスト オフセットに基づいて、DIV に表示できるテキストの量を計算する必要があります。負のオフセットを使用して、テキストとは異なる部分を表示できることを覚えておいてください。

これらすべての数値に基づいて、DIV が保持できるテキストの量を計算するアルゴリズムを理解できるはずですが、ラインラップのために少し注意が必要です。

于 2009-04-22T14:17:55.520 に答える
1

省略記号を表示するために Javascript を使用する必要はありません。CSStext-overflowプロパティを使用して、その値を「省略記号」に設定するだけです。ドキュメントはこちらでご覧いただけます。

また、複数行の後に配置したい場合は、このガイドにアドバイスしてください。

于 2017-08-08T13:21:13.797 に答える
0

これが単に表示目的である場合は、コンテナの右下に「...」を含む絶対配置の div を配置するだけで、テキストの上に配置できます。

于 2013-01-30T22:46:51.413 に答える
0

クライアント側の文字数に基づいて同じ切り捨てを行うことができます。切り捨てられた部分を他の DOM 要素 (または、そのようなことを気にしない場合は独自の属性) に格納します。body.onLoad() で開始するようにすべてを設定します。

于 2009-04-22T14:18:45.330 に答える