完全尊重空白和换行符的资源字符串答案

【问题标题】：Respect exactly the resource string for white-spacing and newlines完全尊重空白和换行符的资源字符串
【发布时间】：2016-09-20 16:06:43
【问题描述】：

（我只是我之前在这个帖子中提出的问题）。

我正在尝试在 HTML 中配置文本区域。我希望它完全按照资源字符串中关于空白和换行符的说明（换行除外）。

例如，给定一个字符串1234,\n 5678, 1234567890123456789\n 123。 \n 表示换行，空格表示空白。因此，我希望它在 textarea 中打印如下：

1234,
  5678, 12345678901234
56789
  123

注意1234567890123456789 被包裹，因为它达到了文本区域的最大宽度。这是完全正常的，和我预期的一样。

但是，我当前的代码没有给出正确的输出，这里是代码：

<!DOCTYPE html>
<html>
<body class="ms-font-m">
    <textarea id="myTextarea" style="font-size: 16px; font-family: monospace; height: 15em; resize: none; white-space: pre-line;"></textarea>
    <script>
        document.getElementById("myTextarea").value = "1234,\n  5678, 1234567890123456789\n  123"
    </script>
</body>
</html>

结果如下：

有谁知道如何修改代码以打印出我的预期？

PS：整个JSBin

PS：我在这个page中尝试了white-space的所有关键字，没有人给我满意的结果...

【问题讨论】：

标签： html css textarea newline whitespace

【解决方案1】：

_{Original answer: 一种如何调整textarea width 大小的方法，以便内容将分别包含在它们的行中而不会溢出但尊重断点\n。}

在我原来的回答中，我误解了你的意思。收到反馈后，我发现我的做法有误，所以这里是您问题的解决方案。

如果您希望单词在溢出时进入下一行并同时尊重空格，您只需删除 white-space: pre-line; 并添加 word-break: break-all; 属性。

document.getElementById("myTextarea").value = "1234,\n  5678, 1234567890123456789\n  123"

#myTextarea{
  font-size: 16px; 
  font-family: monospace; 
  height: 15em; 
  resize: none;
  word-break: break-all;
}

&lt;textarea id="myTextarea" style=""&gt;&lt;/textarea&gt;

【讨论】：

感谢您的详细评论，但单击 Run code snippet 并没有显示我对 OP 的预期。正常吗？
@SoftTimur 但是在您的问题中，您希望显示作为参考的文本，空格和断点。这样对吗？点击Run code snippet有什么不同？
我想要的布局在OP的开头指定：我希望12345678901234跟5678在同一行，而56789由于预先固定而转到另一行textarea 和环绕的宽度。 Run code snippet 你的代码和这个完全不一样...
@SoftTimur 不同之处在于您输入的字符串和预期的输出。当您输入 1234,\n 5678, 1234567890123456789\n 123 时，您只会得到 3 行，这是我的结果。
@SoftTimur 但别担心，我会在字符串中添加你的 56789 以获得预期的输出:)

【解决方案2】：

由于字体、字母的大小或宽度大小，它似乎会进入下一行，但我没有得到你得到的输出，它不会进入下一行。宽度为 20em 时不起作用，但宽度为 18em 时起作用。你想让 DDDDDD.... 的大文本允许滚动还是不换行？使用空格：nowrap；而不是预线。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Title</title>  
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <link href="Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    <link href="Common.css" rel="stylesheet" type="text/css" />
    <script src="Notification.js" type="text/javascript"></script>
    <script src="Home.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <style>
    .ms-TextField.ms-TextField--multiline .ms-TextField-field {
    font-family: monospace;
    height: 15em; 
    resize: none;
    white-space: nowrap;
    width: 10em;
    overflow: hidden;
    }
    </style>
</head>
<body class="ms-font-m">
    <div id="content-main">
    <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
        <textarea class="ms-TextField-field" id="myTextarea" spellcheck=false style="font-size: 16px;"></textarea>
    </div>
    <script>
        document.getElementById("myTextarea").value = "=AAAA,\n  BBBB, DDDDDDDDDDDDDDDDDDDDDDDDD\n  CCCC"
    </script>
    </div>
</body>
</html>

【讨论】：

答案质量有点低。这应该是一个评论。你还没有足够的代表。发表评论，但如果您编辑和改进此答案，您可能会获得投票或接受。
我希望 DDDDD... 被包裹而不是滚动......我们怎么能这样做？