时间戳

首页 > 解决方案 > React 聊天应用程序文本是长错误问题？

javascript - React 聊天应用程序文本是长错误问题？

问题描述

我有一个使用 React 的聊天应用程序。如果用户发的文字很像超过 100 个字母，我看不到所有消息都正常，我该如何解决这个问题？你可以在图片中看到。

在此处输入图像描述

{Object.keys(messages).map((keyName) => (
    messages[keyName].isOut 
        ? <div>
            <div className="sender1">
                {messages[keyName].content.text}
                <span className="timestamp1" > {messages[keyName].date}</span>
            </div>
        </div>
        : <div>
            <p className="receiver1" >
                {messages[keyName].content.text}
                <span className="timestamp1" > {messages[keyName].date}</span>
            </p>
        </div>
))}

.sender1{
  width: fit-content;
  padding: 15px;
  border-radius: 8px;
  margin: 10px;
  min-width: 60px;
  padding-bottom: 26px;
  position: relative;
  text-align: right;
  margin-left: auto;
  background-color: #dcf8c6;
}

.receiver1{
  background-color: whitesmoke;
  width: fit-content;
  padding: 15px;
  border-radius: 8px;
  margin: 10px;
  min-width: 60px;
  padding-bottom: 26px;
  position: relative;
}

标签： javascripthtmlcssreactjs

解决方案

您可以使用最大宽度。我是说：

.sender1{
  max-width:300px //example
  word-break: break-all;
  width: fit-content;
  padding: 15px;
  border-radius: 8px;
  margin: 10px;
  min-width: 60px;
  padding-bottom: 26px;
  position: relative;
  text-align: right;
  margin-left: auto;
  background-color: #dcf8c6;
}

.receiver1{
  max-width:300px; //example
  word-break: break-all;
  background-color: whitesmoke;
  width: fit-content;
  padding: 15px;
  border-radius: 8px;
  margin: 10px;
  min-width: 60px;
  padding-bottom: 26px;
  position: relative;
}

也许对于receiver1，您应该使用text-align：left。

推荐阅读