Autocompleting Textbox (ストアにバインド) とカスタムのテンプレート化された DataView (再び別のストアにバインド) で構成される、ExtJS を使用して作成されたビューがあります。そして、ビューは以下のようになります。
仕組みは次のとおりです。
- ユーザーは検索ボックスでタグを検索し、一致するタグをドロップダウンから選択します。選択すると、すぐ下のデータビューに自動的に追加され、タグ クラウドのように表示されます (正確ではありません)。
- DataView に追加されたタグ アイテムはカスタム スタイルであり、DataView から削除するためのラベルの横に「削除」リンクがあります。
さて、ここに問題があります：
- DataView の使用可能な幅は固定されているため、タグ項目のテキストが長い場合、テキストが壊れて次の行にタグの残りの部分が表示されることがわかります。
私が欲しいのは次のようなものです：
ご覧のように、Tag 項目が使用可能な領域に収まるほど小さくない場合は次の行に入りますが、スペースが使用可能な場合は同じ行になります。
CSSでそれを達成する方法はありますか? またはこれのためにJSロジックを書く必要がありますか?
CSS ソリューションについては、悪意のある IE7/8 をサポートする必要があることに注意してください。