html/css - 输入文本区域,达到宽度后移动 to/break 新行
html/css - Input text area, move to/break new line once width is reached
我正在建立一个聊天 UI 并且我已经想出了如何在达到宽度时使用 css 脚本中的 word-break: break-all
来中断消息文本以接收和发送消息.我不知道如何对用户写入文本的实际输入字段执行此操作。这一切都在一行中进行,而不是像在智能 phone.
我已经尝试将 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>
为了换行,您应该使用 <textarea>
元素。