//tips
//smart contract
画面に描画される際に一定の長さになると自動で折り返されるような設定を追加する。
調べていくと文字列に変換されていないものは折り返されないということがあるらしく、日本語で入力するときちんと画面幅に合わせて折り返された。
https://qiita.com/kazufoot21/items/b381f4b9c4f44fa97aee
https://stackoverflow.com/questions/62723863/css-overflow-wrap-does-not-work-in-react-js
何も指定しない場合は、日本語は、単語の途中で折り返され、英語は、単語ごとに折り返されるため長い英単語は、折り返されず、範囲を超えて表示されるよう。
style={{overflowWrap: 'break-word’}}を追加。
これにより文字の折り返しもしっかり対応できるようになった。
{item.userid==authid
?
<Typography className={classes.titlebackshape} style={{overflowWrap: 'break-word'}}>
{item.Message}
</Typography>
:
<Typography className={classes.titlebackshape2} align="right" style={{overflowWrap: 'break-word'}}>
{item.Message}
</Typography>
}
</div>
))
素晴らしい。
左右のコメントの枠の長さも多少調整する。width: '80%’とすることで表示領域を簡単に減らせた。
titlebackshape:{
backgroundColor: "#e1f5fe",
//border: '0.5px solid black',
borderRadius: '10px',
margin: '5px',
padding: '10px',
//display: 'inline-block'
width: '80%'
},
一方でログインユーザーのメッセージは左揃え、相手のユーザーは右揃えでメッセージを表示させるようにしたいので、こちらを追加編集。
<Box textAlign="center">の技を使うか。
doright:{
align:'right',
marginBottom:-6,
},
aright:{
//flexGrow:1//可能な限りの幅を取る
textAlign: "right",
},
は効果なし。
<Box className={classes.Rbalance}>
Rbalance:{
display:'flex',
justifyContent: 'flex-end'
},
こちらの設定により乗り越えることができた。メッセージの入れ物も右揃えにできた。
リストの文字・アバターも大きくして描画を調整する。
<span variant="h3" className={classes.imagemargin} >{item.username}</span>
Spanでfont調整することが難しかったので
<Typography variant="h3" className={classes.imagemargin}>{item.username}</Typography>
に組み替え。imgもこのタグ内に収めた。
<Typography variant="h3" className={classes.imagemargin}>{item.username} <img src={item.storagelink} className={classes.avatarshape} alt="" width="50" height="50"/></Typography>
こうすることで大文字の名前の横にアバターを表示させることができた。
アバター画像の位置をもう少し下げたいのでmakestyleを調整。
文字を浮かせたいのだがverticalAlign: 'middle’で対応できないどうするか。
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid).then(() => router.reload())}>
<img src={item.storagelink} className={classes.avatarshapeleft} alt="" width="50" height="50"/> <Typography display="inline" variant="h4" className={classes.imagemarginv}>{item.username} </Typography>
</Card>
</div>
))
