javascript - Firefox で text-overflow: ellipsis を模倣するにはどうすればよいですか?

Question

ユーザーがテキストボックスフィールドに入力したものに設定された div に動的テキストが含まれています。テキストが div に収まらない場合、現時点では端で切り取られ、境界を越えて伸びるすべてのテキストは表示されません。ボックス内に収まるようにテキストを切り詰め、最後に省略記号 (...) を追加したいと思います。例えば：

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

コードタグは固定幅フォントを使用しているため、例では明らかに簡単で、文字を数えるのと同じくらい簡単です。私は可変幅のフォントを持っているので、「WWWWWWWWWWWW」と入力すると、「.......」よりもはるかに少ない文字数で埋められます。

これを行う最善の方法は何ですか？ここで、テキストの実際のピクセル幅を簡単に見つけるための潜在的な解決策を見つけました: http://www.codingforums.com/archive/index.php/t-100367.html

しかし、そのような方法でも、省略記号を実装するのは少し厄介です。したがって、20 文字で収まらないことがわかった場合は、19 に切り詰めて省略記号を追加し、再度収まるかどうかを確認する必要があります。次に、18 (と省略記号) に切り捨てて、もう一度やり直してください。そしてまた。そしてまた…収まるまで。より良い方法はありますか？

編集: 答えに基づいて、元のアプローチが最適であると判断しましたが、測定のためだけに別の td 要素を作成しないことで上記のリンクのソリューションを改善しようとしましたが、これはハックのように感じます。

これが私のコードです：

<div id="tab" class="tab">
    <div id="tabTitle" class="tabTitle">
        <div class="line1">user-supplied text will be put here</div>
        <div class="line2">more user-supplied text will be put here</div>
    </div>
</div>

そしてスタイル：

.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}    

.tab .tabTitle {
    height: 30px;
width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}

.tab .tabTitle .line1, .tab .tabTitle .line2 {
    display:inline;
    width:auto;
}

および省略記号をトリミングして追加する JavaScript:

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

「line1」と「line2」の div が関数に渡されます。「WWWWWWWWWWWWWWWWWW」のような単一の単語入力の場合は機能しますが、複数単語の入力「WWWWWW wwwWWW wwwWWW」では機能しません。改行を追加し、テキストを「WWWWWW」の幅として測定するだけだからです。

テキストを非表示の測定要素にコピーせずにこれを修正する方法はありますか? テキストを折り返さないようにライン div のスタイルを設定する方法はありますか?

score 11 · Accepted Answer

テキストを折り返さないようにライン div のスタイルを設定する方法はありますか?

そこにwhite-space: nowrapfor があります。はい、これは古いブラウザーでも機能します。

score 5 · Accepted Answer

この問題は、Firefox でも機能しているはずです。

HTML

<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>

CSS

.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}

bindings.xml

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
    <content><children/></content>
</binding>
<binding id="ellipsis">
    <content>
        <xul:label crop="end"><children/></xul:label>
    </content>
    <implementation>
        <field name="label">document.getAnonymousNodes(this)[0]</field>
        <field name="style">this.label.style</field>
        <property name="display">
            <getter>this.style.display</getter>
            <setter>if(this.style.display!= val)this.style.display=val</setter>
        </property>
        <property name="value">
            <getter>this.label.value</getter>
            <setter>if(this.label.value!=val)this.label.value=val</setter>
        </property>
        <method name="update">
            <body>
                var strings= this.textContent.split(/\s+/g)
                if(!strings[0])strings.shift()
                if(!strings[strings.length-1])strings.pop()
                this.value=strings.join('')
                this.display=strings.length?'':'none'
            </body>
        </method>
        <constructor>this.update()</constructor>
    </implementation>
    <handlers>
        <handler event="DOMSubtreeModified">this.update()</handler>
    </handlers>
</binding>
</bindings>

score 4 · Accepted Answer

jQuery を使用している場合は、私が使用する優れたプラグインがあります。

あるいは、[この例] (404 NOT FOUND!) はクロスブラウザで動作するようです。

ご不明な点がございましたら、コメントでお問い合わせください。

404 リンク: http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

score 3 · Accepted Answer

新しいバージョンのCSS（CSS3）にはtext-overflow:ellipsis、これが含まれている必要があります。現在、IEバージョン6以降、およびSafariとChromeで動作します。Firefoxではサポートされていないため、これはまだ実際には有用な答えではありませんが、最終的にはCSSにこれを処理させることが最善の方法であることを覚えておく価値があります。

CSS3仕様ドラフト：http ：//www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

サポートされているブラウザ：http ：//www.quirksmode.org/css/contents.html （下部にある「text-overflow」までスクロールダウン）

score 1 · Accepted Answer

あなたが提起するポイントの1つだけに答えるには：

したがって、20文字で収まらないことがわかった場合は、19に切り捨て、省略記号を追加してから、再度収まるかどうかを確認する必要があります。次に、18（および省略記号）に切り捨てて、再試行します。そしてまた。そして再び...それが収まるまで。もっと良い方法はありますか？

正しい長さを見つけるためのはるかに高速な方法は、文字列を半分にカットし、それが収まるかどうかをテストすることです。含まれている場合：元の長さの4分の1を追加し直し、4分の1がずれていない場合は、それをテストして適合しているかどうかを確認します。この加算/減算値が1未満になるまで、元の長さの1 / 8、1 / 16、1 / 32、...で再帰的に繰り返します。

これはシークアルゴリズムです。ほんの数語より長い文字列の場合、通常、DOMで実行する必要のあるテストの数を10分の1に減らすことができます。

score 1 · Accepted Answer

簡単に言えば、ハックに頼らないより良い方法はありません。

たとえば、position:absolute スパンを使用して「...」を実際のコンテンツの上に配置し、overflow:hidden をコンテナーに設定し、コンテンツがコンテナー内に収まる場合にのみ余分なスパンを非表示にすることができます。これにより、切り捨てコードを 1 回だけ実行できます。

個人的には、ピクセル幅の計算を数回余分に実行するだけです。テキストの設定と幅の読み取りは高速な操作であるため、目立たないはずです。

score 1 · Accepted Answer

を使用しtext-overflow:ellipsisます。IE のみではありません...ほとんどの主要なブラウザでこれを行うことができます。
しかし、ここにできない場合は、このための jQuery プラグインがあります。

score 0 · Accepted Answer

0

dojox.html.ellipsisを試してください

于 2009-12-07T17:23:13.250 に答える

score 0 · Accepted Answer

いいえ、それは簡単な作業ではありません。私は1年前に同じことをしなければならなかったのですが、Internet Explorer（バージョン6以降）、Opera、Safariでもそれができますが、Firefoxはできません。申し訳ありませんが、ハックだけがあなたを救うことができます

score 0 · Accepted Answer

Firefox 4.0 と、まだ実装されていないtext-overflow:ellipsisCSS プロパティについて:

このリンクは、問題の部分的な解決策を提供します。

text-overflow:ellipsiscss のみを使用した場合と同様の結果が得られます。

score 0 · Accepted Answer

これを試して：

リンクワン

アップデート：

独自の {word-wrap: break-word;} を使用すると、IE は改行を強制します。最新のブラウザは、デフォルトの {overflow: visible;} を持つことができ、コンテナを展開せずに適切にオーバーフローします。

score 0 · Accepted Answer

0

オペラの場合:

-o-text-overflow:ellipsis;

于 2010-11-18T11:55:07.430 に答える

score 0 · Accepted Answer

びにゃみんさんのリプライから変更this.value=strings.join('')したところ、うまくいきました！this.value=strings.join(' ')

javascript - Firefox で text-overflow: ellipsis を模倣するにはどうすればよいですか?

13 に答える 13

Related

Reference