调整 <pre> 元素内的文本大小，如 <textarea>答案

【问题标题】：Resize text inside <pre> element like <textarea>调整 <pre> 元素内的文本大小，如 <textarea>
【发布时间】：2022-06-13 19:29:35
【问题描述】：

我想调整 pre 元素内的文本大小，例如 textarea，例如，如果您将 textarea 的列设置为 10 并且您的文本超过了该值，那么文本将转到下一行。

如何使用 pre 元素做到这一点？技术术语是什么？

请注意，我需要使用pre 元素，因为它读取\n 和\r，而textarea 不允许在其下附加按钮（为什么？）。

一个例子：

我在下面提供一个虚拟场景（工作代码）来说明我的问题。

  <!DOCTYPE html>
    <html>
        <head>
            <button onclick="call()">Click</button>
        </body>
        <script>
     function call(){
    view = window.open("","Viewer", "width=400,height=600, resizable=no");
    view.document.write('<div id="id_1"</div>');
        t=["asdf", "sasdfasdfasdfasdfasd", "sasdfasdfasdfasdfasd"]
        id = view.document.getElementById("id_1");
        for (var i = 0; i < 3; i++){
    
            if (i % 2 == 0){
            
            ed_1 = document.createElement("pre");
            ed_1.id = "edt_"+i;
            ed_1.textContent = t[i];
            id.appendChild(ed_1);
            
            prnt = view.document.getElementById("edt_"+i);
            edb_1 = document.createElement("button");
            nextline_gap_1 = document.createElement("br");      
            edb_1.innerHTML = "Button no = "+i;
            edb_1.id = i;
            prnt.appendChild(nextline_gap_1);           
            prnt.appendChild(edb_1);    
                              }
                              else{
           text_a = document.createElement("textarea");     
            text_a.readOnly = "true";
            text_a.cols = "10"; 
            text_a.id = "edt_"+i;
            text_a.textContent = t[i];
            id.appendChild(text_a);
            
            
            prnt = view.document.getElementById("edt_"+i);
            edb_1 = document.createElement("button");
            nextline_gap_1 = document.createElement("br");      
            edb_1.innerHTML = "Button no = "+i;
            edb_1.id = i;
            prnt.appendChild(nextline_gap_1);           
            prnt.appendChild(edb_1);          
                             } } }
        </script>
    </html>

【问题讨论】：

标签： javascript text google-chrome-extension pre

【解决方案1】：

您只需要更改样式的样式

pre {
  resize: both;
  overflow: auto;
  border: 2px solid;
}

&lt;pre&gt;Some pre text&lt;/pre&gt;

“resize”样式中的“both”值指定高度和宽度均可调整大小。如果您只想使高度可调整大小使用垂直，而宽度使用水平。只要确保pre是块元素并且溢出没有隐藏，否则它将不起作用。

延伸阅读：Article on "resizable" style by MDN

【讨论】：

【解决方案2】：

你的代码有很多问题：

您应该避免使用onevent 属性，例如onclick="call()"，而是使用addEventListener。
您应该避免使用document.write，最好创建一个documentFragment 并将其附加到弹出窗口中。
您无需手动循环遍历数组，只需使用 Array.forEach。
你没有declared你的任何变量。
你的代码不是很DRY。您重复了只能在范围更高的地方编写一次的语句。
您不需要选择已附加到弹出窗口的元素，因为您已经拥有对它们的引用。
您不能将button inside 嵌套在textarea 中。
您应该使用 CSS margins 添加空格，而不是 <br> 元素。这些仅用于段落内的换行符。
<pre> 元素具有与其他元素不同的特定空白行为。您可以使用white-space CSS 属性覆盖它。您还可以使用overflow-wrap 属性控制wrapping 的完整的长文本字符串。

在下面，您会发现您的代码以一种考虑到上述所有要点的方式重新编写。如果您不了解其中的任何方面，请告诉我，我会进一步解释。

<!DOCTYPE html>
<title> Pre-Wrap Test </title>
<button id="trigger">Click</button>
<script>
  let trigger = document.getElementById('trigger');
  trigger.addEventListener('click', injectContent);

  let text = [
    'asdf',
    'sasdfasdfasdfasdfasd',
    'sasdfasdfasdfasdfasd'
  ];

  function injectContent() {
    let view = window.open('', 'Viewer', 'width=400, height=600, resizable=no');
    let fragment = document.createDocumentFragment();
    let style = document.createElement('style');
    
    style.textContent = `
      pre {
        overflow-wrap: anywhere;
        white-space: normal;
      }
      
      textarea, pre {
        width: 5rem;
        display: block;
        margin-bottom: 0.2rem;
      }

      .wrapper {
        margin-bottom: 1rem;
      }
    `;
    
    fragment.append(style);

    text.forEach((t, i) => {
      let out = document.createElement('div');
      let btn = document.createElement('button');
      let box;

      out.className = 'wrapper';

      btn.textContent = `Button no = ${i}`;
      btn.id = `btn-${i}`;
      
      if (i % 2 == 0) {
        box = document.createElement('pre');
      } else {
        box = document.createElement('textarea');
        box.readOnly = "true";
      }

      box.id = `edt_${i}}`;
      box.textContent = t;
      
      out.append(box);
      out.append(btn);
      
      fragment.append(out);
    });
    
    view.document.body.replaceChildren(fragment);
  }
</script>

【讨论】：

你应该创建一个 sn-p。您会发现至少有 1 个拼写错误。

【解决方案3】：

您可能想尝试输入一些文本并在下面的 sn-p 中使用可调整大小的 pre 元素：

pre {
  resize: both;
  border: 1px solid;
  overflow: auto;
  white-space: normal;
}

&lt;pre contenteditable="true"&gt;&lt;/pre&gt;

我认为pre 没有与textarea 相同的默认属性，但可以使用一些CSS 来覆盖这些。

据我了解，您试图找到 white-space 属性。

More information about the white-space property

【讨论】：