I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break and overflow-wrap, but none of them seem to resolve the issue... Can anyone provide assistance?
Below is my script:
$(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();
});
});
I have experimented with CSS styles like overflow-wrap, but they have not yielded the desired result. I anticipate the response to appear within a single field and wrap onto different lines based on the length of the text.