2

内部にテキストを含む div があります。テキストがオーバーフローする場合は div であり、最後に省略記号を付けて短縮されます。私がやりたいのは、楕円の後に二重引用符を追加して、次のようにすることです。

「速いお兄ちゃん…」

これが私のコードです：

<html><body>
  <div style="width: 100px;background: #CCCCCC;">
    <div style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">"The quick brown fox"
  </div></div>
</body></html>

これを行う簡単な方法/テクニックはありますか、それとも代わりに独自のカスタム省略記号を作成する必要がありますか?

皆さんありがとう！

4

2 に答える 2

5

CSStext-overflowは、次のようなカスタム文字で構成できます。

.customEllipsis {
    overflow:hidden; 
    white-space: nowrap;
    text-overflow: '…"';
}

ただし、サポートは実験的なものであり、上記の例は現在Firefox でのみ機能します。

クロスブラウザーのサポートについては、サーバー上の PHP (質問が PHP でタグ付けされているため) またはクライアント上の JavaScript で出力を変更する必要があります。

更新 2015-07-29 text-overflowは、最新のすべてのブラウザーで完全にサポートされるようになりました。

更新 2016-07-01 Chrome でテストしたように、Blink Web エンジンに移行するとこれが壊れた可能性があります -この Blink の欠陥を参照してください。また、Edge では動作しないようです。

そのため、現在、を使用したクロスブラウザ ソリューションはありませんtext-overflow: <string>。<string>機能が「リスクあり」とマークされているため、「相互運用可能な実装が見つからない」場合は削除される可能性があるため、さらに悪化します。

于 2013-05-17T07:58:59.050 に答える