material-uiのtable修正&cssの改行

tableうまくいってないので修正。

TableCellの改行がされてなさそう。 TableContainerが不要そうだったので外しつつ、table自体にmin-width指定してたのを外す。

const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
+  labelCell: {
+    wordBreak: 'keep-all',
+  },
+  valueCell: {
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
   },
 })

CSSの改行まわり整理

• whiteSpace - 改行やスペース・タブをそのまま表示するか、無視するかを指定。
• wordBreak - 改行するかを判断
• overflowWrap - 改行するかを判断
• wordWrap - overflowWrapと同じだが、サポートしてないブラウザがあるため併記するらしい？(https://w3g.jp/blog/confusing_word-break_word-wrap)

wordBreakとoverflowWrapの使い分け。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

メモ: word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

なるほど。word-breakはあふれずに配置できても改行させるかを判断できるものということ。 今回だとあふれた場合だけ改行してほしいので、overflow-wrapを使うのが正しそう。 URLがwrapされないのでその場合はoverflow-wrap: anywhereにしてみる。

rel="nofollow" リンク先に評価を渡したくないときなどに使う。ユーザが投稿できるリンクには置いたほうがよさそう。 https://mightyace.co.jp/2020/07/15/column41/

sponsored, ugcというのができたらしい。