所以可以透過CSS Style來解決初步的問題，

在<p></p>的部分，不希望因為過多文字換行可以使用此方式:

p {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

原文字的內容當過多時，就不換行改為「…」。

另一種方式直接使用js對文字做過多處理為「…」

// 以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/