完全尊重空白和换行符的资源字符串
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;
<textarea id="myTextarea" style=""></textarea>
【讨论】:
感谢您的详细评论,但单击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...
被包裹而不是滚动......我们怎么能这样做?以上是关于完全尊重空白和换行符的资源字符串的主要内容,如果未能解决你的问题,请参考以下文章