Question

我正在编写一个脚本来显示由不同颜色突出显示的文本的重复单词，我通过将文本复制到我的第一个textarea来显示它，ID为＆＃34; texto＆＃34;

<textarea cols="70" rows="15" id="texto"  ></textarea>

我的代码效果很好，找到这些单词并在粘贴文本后显示它并按下按钮：更改颜色，使用：

<div id="out1" ></div>
<div class="wrapper">
    <button class="button buttom0" style="vertical-align:middle;background-color:SpringGreen" onclick="myFunction()"; ><span>Change Color</span></button>

</div>

和

document.getElementById("out1").innerHTML = newText;

问题是文本显示超出我的第二个textarea的限制，其中包含id：＆＃34; ou1＆＃34;，我想了解修复此问题的建议我构建以下{{3}用于显示问题的文件，这是我用来测试它的简短文本：

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for giving focus to the TEXTAREA. Authors can set the access key on the TEXTAREA element or the LABEL element associated with it. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

Answer 1

删除white-space

的css中的规则#out1

#out1 {
  width: calc(100% - 150px);
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  white-space: pre;//REMOVE
  background-color: gray;
  padding: 25px;
  border: 25px solid navy;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 16px white; 
}

结果： https://jsfiddle.net/cmedina/qhed57z0/18/

Answer 2

从06-30 21:59:01.216: D/COUCOU(21238): isScoreResultValid 1 06-30 21:59:01.703: D/COUCOU(21238): isScoreResultValid 2 06-30 21:59:02.147: D/COUCOU(21238): isScoreResultValid 3 06-30 21:59:02.370: D/COUCOU(21238): NOTisScoreResultValid 4 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:02.584: D/COUCOU(21238): NOTisScoreResultValid 5 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:02.822: D/COUCOU(21238): NOTisScoreResultValid 6 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:03.119: D/COUCOU(21238): NOTisScoreResultValid 7 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:03.448: D/COUCOU(21238): NOTisScoreResultValid 8 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:03.740: D/COUCOU(21238): NOTisScoreResultValid 9 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA 06-30 21:59:04.031: D/COUCOU(21238): NOTisScoreResultValid 10 GamesStatusCodes.STATUS_NETWORK_ERROR_NO_DATA移除white-space: pre;并改为使用#ou1。

“pre-wrap由浏览器保留。文字只会换行换行符。行为类似于HTML中的white-space: pre;标记”

“<pre>由浏览器保留。文本将在必要时换行，并在换行符”

请参阅小提琴https://jsfiddle.net/qhed57z0/20/

white-space: pre-wrap;

http://www.w3schools.com/cssref/pr_text_white-space.asp

如何将文本显示到文本区域以保持其限制？

2 个答案: