为什么我的文本不换行时，我试图减少我的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);
}

不要介意<代码>。粉丝圈。topic-comment在这个问题中它不需要做任何事情

因此，正如你在我的第一个< code >评论中看到的，最长的评论与我的< code >用户评论重叠，然后我不知道如何修复它..基于这个react native [Link] (React native文本离开我屏幕，拒绝换行。怎么办？)和其他东西，但这个词并没有真正包含我的文本，我对这个已经厌倦了..在我的项目中，我总是在任何地方遇到这个问题，我只是做了类似于< code >的事情

任何想法如何解决这个问题？这在 reactjs 中不起作用，但是当我在正常的 html 中尝试这样做时，它工作得很好，我不知道为什么。

如果这还不够，你能给我演示一下我将如何在我的div中包装我的文本吗？我非常讨厌这个bug，因为每当我的项目有很长的文本时，我总是会遇到这个bug……解决方案一定与我的相关。。。。

Answer 1

您可以使用word wrap：break word和空白：正常在用户注释上修复

.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;
}

html prettyprint-override"><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>