Difference in content formatting in Textarea and notepad

Question

I have an ASP.NET MVC application where I display in a text area content that is in the database.

@Html.TextArea("Avisos", Model.Avisos, new { @class = "form-control", rows = 50, style = "max-width:none", @readonly = "" })

The display is misaligned like this:

But if I copy the content of the text area, and paste it into the notepad, it’s ok, as expected:

I have no idea why the difference and how to fix it.

Answer 1

Because of the source used inside <textarea>. Possibly the stylesheet is not using a monospaced font.

Try to define a style like this:

textarea {
  font-family: Consolas, Lucida Console, Courier New, Courier;
}

In your case, you can define inline, thus:

@Html.TextArea("Avisos", Model.Avisos, new { @class = "form-control", rows = 50, style = "max-width: none; font-family: Consolas, Lucida Console, Courier New, Courier", @readonly = "" })

I made a Fiddle.