在做畫面的title, content時永遠最大的問題就是可恨的過多字數爆版問題，
所以可以透過CSS Style來解決初步的問題，
在<p></p>的部分，不希望因為過多文字換行可以使用此方式:
|
1 2 3 4 5 |
p { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } |
原文字的內容當過多時，就不換行改為「…」。
另一種方式直接使用js對文字做過多處理為「…」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 以React function為示範, 將要換的內容值放入做取代 renderContentLimit(p){ const len = 50; // 超過50個字以"..."取代 console.log(p.length); if(p.length>len){ const final=p.substring(0,len-1)+"..."; return final } else{ return p } } |
Reference
https://www.astralweb.com.tw/css-ellipsis/