用一定数量的单词包装javascript文本

Question

我从API中获得了一些字符串文本。我正在将其显示在outlook-addin中，其中只有html、javascript和css。

我正在将文本字符串放在一个面板窗口中，这个窗口很小。我一直试图用css或javascript来包装文本，但到目前为止没有任何进展。

下面是代码: Javascript：

 for (let i = 0; i < data.length; i++) {
        let text = "Subject: " + JSON.stringify(data[i].subject) + "<br>"+
        "CC Emails: " + JSON.stringify(data[i].cc_emails).replace("[]","No Emails are CC'd").replace("[","").replace("]","") + "<br>" +
        "Ticket Creation Date: " + JSON.stringify(data[i].created_at) + "<br>" +
        "Ticket Status: " + JSON.stringify(data[i].status).replace("2", "Open").replace("3", "Pending").replace("4", "Resolved").replace("5", "Closed").replace("6", "Waiting On Customer") ;
        let pre = document.createElement('pre');
        
        
        pre.innerHTML = text;
        pre.style.cssText += 'font-size:24px;font-weight:bold;width:30px'
        
        output.appendChild(pre);

html：

<div class="ms-PanelExample">
    <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
    <button style="margin:1px;" id="get-freshdesk" class="ms-Button ms-Button--primary">
      <span class="ms-Button-label">Freshdesk Tickets</span>
    </button>
  <div class="ms-Panel ms-Panel--xxl">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
        <style>
            ms-Panel-headerText{
                width: 10px;
                height: 100px;
                margin: 0;
                padding: 0;
                inline-size: min-content
                
                background-color: white;
            }
        </style>
      <p class="ms-Panel-headerText">Freshdesk Integration</p>
      <div class="ms-Panel-content">
        <span class="ms-font-mfresh">Latest Ticket information</span> 
      </div>
    </div>
  </div>
</div>

然而，文本仍然被切断：

​

我还尝试在css样式部分将ms-Panel-headerText更改为pre，但没有成功。

任何想法都会受到赞赏。

谢谢

Answer 1

正如我在评论中提到的。

当您查看有关MDN上的pre元素的文档时，它声明：

“HTML元素表示预先格式化的文本，其显示方式与HTML文件中所写的完全相同。”

来源

因此，尝试任何其他(内联)块元素，它应该可以工作。

Answer 2

预显示文本，就像它在您的代码文件中一样，因此不应用任何文字包装。

但是，如果您真的希望它被包装在预标记中，这似乎是有效的。

​

    <pre style="word-wrap: break-word; white-space: pre-wrap; ">
    The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout.
    </pre>

​