How to make html pre tag responsive

If you have a textbox and you want your user to enter multi-text.
it will work fine if you changed your textbox from input to textarea

but there is a small issue how can i present it on desktop and mobile devices.

I'm using MVC in my presentation layer. 

@Html.Raw("<div class='divpre' style='margin-right: -20px;'><pre class='pre'>" + Html.Encode(@Model.Desc) + "</pre><div>")

now the css
1- desktop

.pre
{
  word-break: break-word;
  white-space: pre-wrap;
  text-align: justify;
  overflow-x: hidden;
 }

2- mobile

@media only screen and (max-width: 600px)
.pre
{
  word-break: break-word!important;
  white-space: pre-line;
  overflow: hidden;
}