html/css - 输入文本区域，一旦达到宽度，移动到/换行

Question

我正在构建一个聊天用户界面，并且我已经弄清楚了如何在我的 css 脚本中使用word-break: break-all 来打破消息文本以接收和发送消息。我不知道如何对用户编写文本的实际输入字段执行此操作。这一切都在打字时排成一行，而不是像在智能手机上发送短信那样中断。

我尝试将word-break: break-all 添加到我的&__textbox 方法中，但它似乎不起作用，我不知道为什么。有人可以指出为什么它不起作用吗？我找到了另一个 UI 的示例，但我似乎找不到在输入字段中允许换行符的内容。

这是我的 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;
  }
}

还有我的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

为了有换行符，您应该使用<textarea> 元素。