Firefoxのテキストオーバーフロー：省略記号を模倣するにはどうすればよいですか？

https://stackoverflow.com/questions/1820384

10-07-2019
|

質問

ユーザーがテキストボックスフィールドに入力したものに設定されたdivに含まれるダイナミックテキストがあります。テキストがdivに収まらない場合、現在は端で切れてしまい、境界線を越えて伸びるすべてのテキストは表示されません。テキストを切り捨てて、ボックス内に収まり、末尾に省略記号（...）が追加されるようにします。例：

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

この例では、コードタグが固定幅フォントを使用しているため、文字をカウントするのと同じくらい簡単なので、簡単です。可変幅フォントがあるので、「WWWWWWWWWWW」と入力すると＆quot; ................＆quot;よりもはるかに少ない文字で埋められます。します。

これを行う最良の方法は何ですか？テキストの実際のピクセル幅を単に見つけるための潜在的な解決策をここで見つけました： 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;
    }
}

＆quot; line1＆quot;および「line2」」 divは関数に渡されます。「WWWWWWWWWWWWWWWWWWW」のような単一の単語入力の場合に機能します。複数単語の入力「WWWWW WWWWW WWWWW」には対応していません。それは単に改行を追加し、「WWWWW」の幅であるとテキストを測定するからです。

テキストを非表示の測定要素にコピーすることなく、これを修正できる方法はありますか？行divのスタイルを設定して、テキストを折り返さないようにする方法はありますか？

解決

行divのスタイルを設定して、テキストが折り返されないようにする方法

そこには white-space：nowrap があります。はい、これは古代のブラウザでも機能します。

他のヒント

この問題は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>

jQueryを使用している場合は、素晴らしいプラグインがあります。

別の方法として、[この例]（404 NOT FOUND！）はクロスブラウザで動作するようです。

質問がある場合は、コメントで知らせてください！

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

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 （下部の[テキストオーバーフロー]までスクロールダウンします）

簡単に言えば、いや、ハッキングに頼らなければ良い方法はありません。

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

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

text-overflow：ellipsis を使用します。 IE専用ではありません...ほとんどの主要なブラウザでこれが可能です。
ただし、こちらができない場合このためのjQueryプラグインです。

提起したポイントの1つだけに答えるには：

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

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

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

これを試してください：

リンク1

更新：

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

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

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

Operaの場合：

-o-text-overflow:ellipsis;

this.value = strings.join（ ''）を Binyamin this.value = strings.join（ ''）に変更しました>の返信、それは私のためにうまくいった！

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

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

cssのみを使用して、 text-overflow：ellipsis と同様の結果を生成します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow