html/css - Input text area, move to/break new line once width is reached

Question

I am building a chat UI and I have figured out how to break the message text when the width is reached using word-break: break-all in my css script for received and sent messages. I can not figure how to do it to my actual input field where the user writes the text. It all goes in one line while typing instead of breaking like it would sending a text message on a smart phone.

I have tried adding word-break: break-all into my &__textbox method but it doesn't seem to be working and I am not sure why. Can someone point out why it's not working? I have found examples of another UI doing it but I can't seem to find what is allowing linebreaks in the input field.

Here is my css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100%;
  font-family: arial;
  font-size: 62.5%;

}
.chatbox-avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  background: white;
  padding: 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  position: absolute;
  transition: .1s ease-out;
  bottom: 0;
  left: 1px;
}

.chatbox-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.c-chat-window {
  height: 300px;
  width: 250px;
  position: relative;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 12px;

 
  &__messages {
    border: 1px solid lightgrey;
    border-top: 0;
    border-bottom: 0;
    height: calc(100% - 68px);
    overflow-y: scroll;
    padding: 0 10px;
    position:absolute;
    top: 34px;
    line-height: 1.4;
    width: 100%;


  }
  
  &__compose {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    border: none;




  }
  
  &__text-box {
    flex: 1;
    height: 40px;
    width: 100%;
    border:0;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    padding: 0 10px;





  }
  
  &__button {
    border: none;
    background: orangered;
    padding:  0 15px;
    color: white;
  }
  
  &__container {
    position: absolute;
    bottom: 0;
    right: 50px;  
    word-break: break-all






  }
  
  &__header {
    background: blue;
    border-bottom: 1px solid white;
    color: white;
    cursor: pointer;
    padding: 10px;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 10;
  }
  .chat-partner-name {
  flex: 1;
  padding: 0 0 0 80px;
  font-size: 15px;
  color: white;
}
  
  &__target {
    height: 40px;
    background: orangered;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 25px;
    
  }
  
  &__message {
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    

    
    &--sent {
      background: orangered;
      color: white;
      margin-left: auto;
      word-break: break-all


    }
    
    &--received {
      background: lightgrey;
      margin-right: auto;
    word-break: break-all


    }
  }
  
  &__notification {
    background: dodgerblue;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 15;
    right: 0;
    top: -15px;
    display:flex;
    
    &::after {
      content: '';
      display:inline-block;
      margin: auto;
      height:5px;
      width:5px;
      background-color: white;
      position: absolute;
      left: calc(50% - 2.5px);
      top: calc(50% - 2.5px);
      

    }
  }
  
  &--hide {
    display: none;
  }
}

and my html:

<main>
  <div class="c-chat-window__container">
    <div class="c-chat-window__target">Chatbot</div>

    <div class="c-chat-window__notification c-chat-window--hide"></div>
    <div class="c-chat-window c-chat-window--hide"> 
      <div class="c-chat-window__header">
        <div class="chat-partner-name">
        <a target>Chatbot</a>
      </div>
      <div class="chatbox-avatar">
        <a target="_blank" href="https://www.facebook.com/mfreak"><img src="https://gravatar.com/avatar/2449e413ade8b0c72d0a15d153febdeb?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png" /></a> 
      </div>
      </div>
      <div class="c-chat-window__messages">
      </div>
      <div class="c-chat-window__compose">
        <input type="text" class="c-chat-window__text-box" placeholder="Write message...">  
        <button class="c-chat-window__button" type="submit">Send
        </button>
      </div>
    </div>
  </div>
</main>

Answer 1

In order to have line breaks, you should use the <textarea> element.