neo33 neo33 - 5 months ago 13
Javascript Question

How to display text into a textarea preserving its limits?

I am writing a script to display the repeated words of a text highlighted by distinct colors, I display it by copying a text into my first textarea with id called "texto"

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


My code works well and find that words and display it after paste the text and press the button: Change color, using:

<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>


and:

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


The problem is that the text is displayed out of the limits of my second textarea with id: "ou1", I would like to appreciate a suggestion to fix this problem I build the following https://jsfiddle.net/qhed57z0/15/ file to show the problem and this is the short text that I used to test it:

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

Remove white-space: pre; from #ou1 and use pre-wrap instead.

"white-space: pre; is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML"

"white-space: pre-wrap; is preserved by the browser. Text will wrap when necessary, and on line breaks"

see fiddle https://jsfiddle.net/qhed57z0/20/

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

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