HTML/CSS textarea - how to prevent word-wrap only for words with hyphen

Question

In textarea I want use word-wrap / break word but not on words with hyphen

Here is the code

#wrap {
  width: 250px;
  position: relative;
  font-family: sans-serif;
  height: 80px;
}

#wrap .area {
  resize: none;
  outline: none;
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

#wrap textarea.area {
  left: 0;
  height: 100%;border: 2px solid;
  background: transparent;
}

<div id="wrap" style="height: 300px;">
<textarea name="test" class="area" style="font-family: Comic Sans MS;">Line1
Line2
Line3-ShouldBeStillLine3-StillLine3</textarea></div>

The word 'Line3-ShouldBeStillLine3-StillLine3' should not be wrapped. I know it will not fit into the width of 250px but it is ok in this case. I do not get it to work within textarea.

Answer 1

Add white-space: nowrap; on to the textarea element. But yes, as you mentioned it does not fit.

Edit ~ added wrap="off" to HTML textarea element.

#wrap {
  width: 250px;
  position: relative;
  font-family: sans-serif;
  height: 80px;
}

#wrap .area {
  resize: none;
  outline: none;
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

#wrap textarea.area {
  left: 0;
  height: 100%;
  border: 2px solid;
  background: transparent;
}

textarea {
  /* white-space: nowrap; ~ is replaced by wrap="off" in HTML */
}

<div id="wrap" style="height: 300px;">
  <textarea name="test" class="area" style="font-family: Comic Sans MS;" wrap="off">Line1
Line2
Line3-ShouldBeStillLine3-StillLine3</textarea></div>