FluentUI DetailsListにデータを表示したい状況があります。列名は非常に長くなる可能性がありますが、列の内容は非常に狭くなる可能性があります。このような場合、ヘッダーは切り捨てられます。 この codepen を参照してください。
ヘッダー テキストが複数行に折り返されるように、この動作を変更する方法はありますか?
2 年前からこの未回答の質問を見つけましたが、Stackoverflow、Github、または公式ドキュメントのトピックに関する回答を見つけることができませんでした。私が試したいくつかのアプローチは次のとおりです。
- のフィールドを
word-break: break-all;介してCSSクラスを挿入しますheaderClassNameIColumn isMultiLine列の設定DetailsHeaderレンダリングをオーバーライドできるコンポーネント自体は、テキストの表示方法をカスタマイズするための小道具を提供していonRenderDetailsHeaderないようです
目的の動作を実現する方法はありますか (長い列ヘッダーを切り捨てるのではなく、複数の行を折り返す)?