为什么当我试图在反应中减小 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 风格基于本机 [Link] () 和其他东西，但这个词并没有真正 WRAP MY TEXT 而且我很完成这个..我总是在我的项目中的任何地方遇到这个问题，我只是做一些像<br/>但是我厌倦了它我想自己包装它而不是做一些<br/>

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

更新这是我的文字不多时的示例这是我的文字很多时的示例我也在 <textarea> 时尝试过这个，但在

中仍然做同样的事情

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

Answer 1

您可以在 user-comment 上使用 word-wrap: break-word; 和 white-space: normal; 来修复它

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

为什么当我试图在反应中减小 div 的大小时我的文本不换行

Why my text don't wrap when I'm trying to decrease my size of div in react

html

css

reactjs

word-wrap