web-dev-qa-db-ja.com

Material-UI ExpansionPanelSummaryで長い文字列をラップまたは切り捨てる方法

ExpansionPanelを作成します。要約は、途切れのない文字の非常に長い文字列（つまり、ハイフンやスペースなし）になる可能性があります。

試してみたところ、ExpansionPanelSummaryコンポーネントは狭い幅のディスプレイではうまく表示されません。ボタンが上書きされ、画面外にオーバーフローします。

これが ExpansionPanel Material-UIデモから分岐した私の例です。出力フレームの幅を縮小すると、電子メールアドレスが折り返されず、見苦しく見えます： https：/ /codesandbox.io/s/wqm5k3vmywenter image description here

私はnowrapでTypographyを使用して、それをクリップできるようにしました（私の推奨ソリューション）：

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
  <Typography nowrap className={classes.heading}>
    [email protected]
  </Typography>
</ExpansionPanelSummary>

スタイルoverflowWrap: "break-Word"を追加して、ハイフンや空白文字だけでなく、どこにでも強制的に折り返させることも試みました。

私ができる最善の方法は、ExpansionPanelにstyle={{ textOverflow: "Ellipsis", overflow: "hidden" }}を追加して、拡張パネル自体の外側でテキストがオーバーフローしないようにすることです（リンクされた例の2番目の例を参照）。

理想的には、コンテキストの右から切り捨て、省略記号を表示し、展開アイコンを上書きしないことで機能するようにします。
ExpansionPanelを使用してどうすればよいですか？

それができない場合、どうすればワードラップさせることができますか？

Material-UI v3.4.0を使用していますが、ChromeおよびFirefoxで問題が発生しています。

cssmaterial-ui
9
Shorn

公式ドキュメントから： https://material-ui.com/api/typography/

「noWrap」の大文字の「W」に注意してください。

<Typography noWrap className={classes.heading}>
  [email protected]
</Typography>
3
Máté Homolya

Typography要素をtextOverflow： "Ellipsis"でスタイル設定されたdivでラップすることを提案します。次に例を示します。

<div style={{overflow: "hidden", textOverflow: "Ellipsis", width: '11rem'}}> 
  <Typography nowrap className={classes.heading}>
    [email protected]
  </Typography>
</div>
2
Joel Stevick

これが私がそれを解決した方法です：

const useStyles = makeStyles(theme => ({
  summary: {
    overflow: 'hidden'
  }
}))

// ... snipped ...

const classes = useStyles()

// ... snipped ...

<ExpansionPanelSummary classes={{ content: classes.summary }} expandIcon={<SomeIcon />}>
  <Typography noWrap title={experiment.name}>{longTextHere}</Typography>
</ExpansionPanelSummary>

ExpansionPanelSummaryコンポーネント自体にスタイルを適用する代わりに、「内部コンテンツ」に適用します。

1
Cequiel