為什么當我試圖減小反應中的 div 大小時我的文本不換行

Question

我不明白，但是當我嘗試在簡單的 html 中進行操作時。文本在 div 中不重疊，但在 reactjs 中重疊。 這是我的問題。

    const comments = [
        {uid:'1231BASDADA123',comment:"BoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
        {uid:'1231BASDADA123',comment:"Bobo"},
    ]
   
/In my output function/
<div className="list">
     {props.comments.map((item,idx) => {
      return(
        <div className='user'>
            <div className="user-uid">
               <h6> {item.uid}</h6>
            </div>
            <div className="user-comment">
               <h5>
                 {item.comment}
               </h5>
         </div>
     </div>
     )
    })}
</div>
/My CSS/ 

.fandom .topic-comments .list {
    width: 500px;
    height: 500px;
    overflow: auto;
    background: linear-gradient(46deg,black,gray);
}

.fandom .topic-comments .list .user {
    width: auto;
    height: 50px;
    padding: 10px;
    background: black;
    color: rgb(201,198,52);
    border-bottom: 2px solid rgb(235, 231, 23);
}

只是不要介意.fandom.topic-comment它在這個問題上不需要做任何事情

因此，正如您在我的第一條comments中看到的那樣，最長的評論與我的user-comment評論重疊，然后我不知道如何解決它。我嘗試了基於此反應本機 [鏈接] 的不同風格的flexShrink or flexDirection flexDirection本機文本從我的屏幕上消失，拒絕換行。怎么辦？ ）和其他東西，但這個詞並沒有真正換行我的文本，我已經完成了這個。我總是在我的項目中的任何地方遇到這個問題，我只是做類似<br/>的事情，但我受夠了，我想把它自己包裝起來，而不是做一些<br/>

知道如何解決這個問題嗎？ 這在 reactjs 中不起作用，但是當我在正常的 html 中嘗試時，它工作得很好，我不知道為什么..

更新這是我的文字不多時的示例 這是我的文字很多時的示例 我也在<textarea>時嘗試過這個，但仍然在做同樣的事情

如果這還不夠，你們能給我演示一下我如何將我的文本包裝在我的 div 中以做出反應嗎？ 我非常討厭這個錯誤，因為每當我的項目有很長的文本時，我總是會遇到這個問題……解決方案一定與我的有某種關系……

Answer 1

你可以使用word-wrap: break-word; 和white-space: normal; 根據user-comment修復它

 .fandom.topic-comments.list { width: 500px; height: 500px; overflow: auto; background: linear-gradient(46deg, black, gray); }.fandom.topic-comments.list.user { width: auto; height: 50px; padding: 10px; background: black; color: rgb(201, 198, 52); border-bottom: 2px solid rgb(235, 231, 23); }.fandom.topic-comments.list.user.user-comment { word-wrap: break-word; white-space: normal; }

 <div class="fandom"> <div class="topic-comments"> <div class="list"> <div class='user'> <div class="user-uid"> <h6>1231BASDADA123</h6> </div> <div class="user-comment"> <h5> BoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBobo </h5> </div> </div> </div> </div> </div>