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

我有一些从 API 获取的字符串文本。我在 Outlook 插件中显示它，它只是 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，但没有运气。

任何想法表示赞赏。

谢谢