微信聊天界面代码示例 - 带图片及换行功能 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>微信聊天界面代码示例 - 带图片及换行功能</title>
  <style>
.chat-container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
 // border: 1px solid #ccc;
 // border-radius: 5px;
  padding: 20px;
}
<p>.chat {
height: 300px;
overflow-y: scroll;
}</p>
<p>.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}</p>
<p>.received {
background-color: #f2f2f2;
text-align: left;
}</p>
<p>.sent {
background-color: #007bff;
color: #fff;
text-align: right;
}
.content{
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
max-width: 300px; /* 设置最大宽度为300px */
}
.sender {
font-weight: bold;
}</p>
<p>.input-area {
margin-top: 20px;
}</p>
<p>input[type=&quot;text&quot;] {
width: 300px;
padding: 5px;
border-radius: 5px;
}</p>
<p>button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style></p>
</head>
<body>
  <div class="chat-container">
    <div class="chat">
      <div class="message received">
        <div class="sender">Tom</div>
        <div class="content">Hello, how are you?https://p3-sign.douyinpic.com/tos-cn-i-0813/oUzD7mtkAGIayfAAMZDCA3NThXIAUEUgeGCA83~tplv-dy-aweme-images:q86.jpeg?x-expires=1692954000&x-signature=ANfnbHx385S0kPiTy9xRJ5Rp2Cs%3D&from=3213915784&s=PackSourceEnum_DOUYIN_REFLOW&se=false&sc=image&biz_tag=aweme_images&l=2023072617535501F114A0A70EE4002604</div>
      </div>
      <div class="message sent">
        <div class="sender">Me</div>
        <div class="content">I'm fine, thanks!</div>
      </div>
      <div class="message received">
        <div class="sender">Tom</div>
        <div class="content">That's great!</div>
      </div>
    </div>
    <div class="input-area">
      <input type="text" placeholder="Type a message...">
      <button>Send</button>
    </div>
  </div>
</body>
</html>