时间戳

首页 > 解决方案 > 用一定数量的单词包裹 javascript 文本

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

问题描述

我有一些从 API 获得的字符串文本。我在一个只有 html、javascript 和 css 的 Outlook-addin 中显示它。

我将文本字符串放在一个很小的面板窗口中。我一直在尝试使用 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

任何想法表示赞赏。

谢谢

标签： javascripthtmlcss

解决方案

正如我的评论中提到的。

当您查看preMDN Web Docs 上有关该元素的文档时，它指出：

“HTML 元素代表预先格式化的文本，该文本将完全按照 HTML 文件中的内容呈现。”

资源

所以尝试任何其他（内联）块元素，它应该可以工作。

推荐阅读