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

Posted

技术标签:

【中文标题】完全尊重空白和换行符的资源字符串【英文标题】: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的所有关键字,没有人给我满意的结果...

【问题讨论】:

【参考方案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的开头指定:我希望123456789012345678在同一行,而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... 被包裹而不是滚动......我们怎么能这样做?

以上是关于完全尊重空白和换行符的资源字符串的主要内容,如果未能解决你的问题,请参考以下文章

正则表达式匹配文本中包含换行符等空白字符如何匹配

python 模块

空白符号是啥?

python学习-使用制表符或者换行符来添加空白

字符串

字符串