問題タブ [fluentui-react]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

198 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
2863 参照

office-ui-fabric - Fluent UI で DetailsList ヘッダー テキストを折り返す方法はありますか?

FluentUI DetailsListにデータを表示したい状況があります。列名は非常に長くなる可能性がありますが、列の内容は非常に狭くなる可能性があります。このような場合、ヘッダーは切り捨てられます。 この codepen を参照してください。

ヘッダー テキストが複数行に折り返されるように、この動作を変更する方法はありますか?

2 年前からこの未回答の質問を見つけましたが、Stackoverflow、Github、または公式ドキュメントのトピックに関する回答を見つけることができませんでした。私が試したいくつかのアプローチは次のとおりです。

  • のフィールドをword-break: break-all;介してCSSクラスを挿入しますheaderClassNameIColumn
  • isMultiLine列の設定
  • DetailsHeaderレンダリングをオーバーライドできるコンポーネント自体は、テキストの表示方法をカスタマイズするための小道具を提供していonRenderDetailsHeaderないようです

目的の動作を実現する方法はありますか (長い列ヘッダーを切り捨てるのではなく、複数の行を折り返す)?


12345678910