I have a textarea I am using for an ASCII art 3d game and when there are different types of characters, it wraps even though I have set all the css wrapping stuff to no wrap. It's only meant to wrap at the end of each line and not in between different characters.
textarea {
width: 300px;
height: 5em;
font-size: 14px;
overflow: hidden;
overflow-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
#expected {
width: 300px;
height: 5em;
font-size: 14px;
font-family: monospace;
outline: 1px solid gray;
border-radius: 1px;
padding: 2px;
}
<p>actual:</p>
<textarea wrap="hard">aaaaaaaaaaaaaa((((((((((((((((((((((((((((((>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</textarea>
<p>expected:</p>
<div id="expected">aaaaaaaaaaaaaa(((((((((((((((((((((((<br>(((((((>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<br><<<<<<<<<<<<<<<<<<<<<<<</div>
I have tried every other question but all the answers just did words and not symbols.