Search code examples
htmlcssreactjsword-wrap

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

I don't understand but when I am trying to do it in simple html. The text is not overlapping in div but in reactjs it is overlapping. Here is my problem.

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

Just don't mind the .fandom .topic-comment it doesn't have to do anything in this problem

So as you see in my first comments the longest comment overlaps to my user-comment and then I don't know how to fix it.. I try different variety of flexShrink or flexDirection in style base on this react native [Link] (React native text going off my screen, refusing to wrap. What to do?) and other stuff but the word doesn't really WRAP MY TEXT and I'm so done with this.. I always get this problem anywhere in my projects and I just do something like <br/> but I'm so sick of it I wanna wrap it on its own not doing some <br/>

Any idea how to fix this? This doesn't work in reactjs but when I try this in normal html it is working very well and I don't know why..

UPDATE Here is the sample when my text is not much enter image description here Here is the sample when my text is a lot enter image description here I also tried this when <textarea> but still does the same thing in

If this is not enought can you just give me guys a demo of how I will wrap my text in my div in react please? I badly hate this bug cause I always encounter this whenever my projects have a long text...the solution must be somehow related to mine....

Solution

  • You can use word-wrap: break-word; and white-space: normal; on user-comment to fix it

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