json 将文本换行到新行

gojuced7 于 12个月前发布在其他

关注(0)|答案(1)|浏览(75)

我一直在尝试从JSON文件中打包长文本，但我找不到解决方法。它一直显示为单个响应的多个字段，如下图所示。我尝试过断字，溢出 Package ，但没有工作.请帮助我
x1c 0d1x的数据
这是我的剧本：

$(document).ready(function () {
  $("form").on("submit", function (event) {
    var rawText = $("#text").val();
    var userHtml =
      '<p class="received-msg-inbox"><span class="received-msg-inbox-p">' +
      rawText +
      "</span></p>";
    $("#text").val("");
    $(".msg-page").append(userHtml);

    $.ajax({
      data: {
        msg: rawText,
      },
      type: "POST",
      url: "/get",
    }).done(function (data) {
      var botHtml =
        '<p class="outgoing-chats-msg" ><span class="outgoing-chats-msg-p" >' +
        data +
        "</span></p>";
      $(".msg-page").append($.parseHTML(botHtml));
    });
    event.preventDefault();
  });
});

字符串
我尝试过CSS样式，如overflow-wrap，但没有工作。我希望响应是在一个单一的领域分为不同的行取决于文本长度。

JSON

来源：https://stackoverflow.com/questions/77377714/wrapping-text-into-new-line

1条答案

按热度按时间

kt06eoxx1#

您分享的脚本与此问题无关。问题在于CSS。由于您没有共享CSS，从图像可以看出，当文本达到其最大宽度时，文本无法正确换行。我已经重新创建了您的情况并尝试提供修复。
从我的Angular 来看，问题是-你可能没有使用 * white-space * 或word-wrap性能。你需要应用下面的CSS来实现预期的结果。

.received-msg-inbox-p, .outgoing-chats-msg-p {
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap;     /* Opera <7 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* IE */
}

字符串

执行情况：

.chat-container {
  display: flex;
  flex-direction: column;
  width: 600px;
  font-family: Arial, sans-serif;
}

.chat-message {
  max-width: 80%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

.other-person {
  align-self: flex-start;
  justify-content: flex-start;
  background-color: #ddd;
}

.you {
  align-self: flex-end;
  justify-content: flex-end;
  background-color: #0b93f6;
  color: white;
}

.chat-message p {
  margin: 0;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

<div class="chat-container">
  <div class="chat-message other-person">
    <p>Hello! This is a long message from another person in the chat. It should wrap onto the next line if it's too long for the chat bubble.</p>
  </div>
  <div class="chat-message you">
    <p>Hi! This is a long message from you in the chat. It should also wrap onto the next line if it's too long for the chat bubble.</p>
  </div>
</div>

的数据
希望对你有帮助。

赞(0）回复(0）举报 12个月前

我来回答

json 将文本换行到新行

1条答案

相关问题

热门标签

最新问答