So long as you're actually using HTML (and not literal plain text) all you need to do is add a viewport meta tag:

    <meta name="viewport" content="width=device-width">

Mobile browsers set the viewport width to a default of 960px (Android might be a little different from iOS). That's why a plain text file displays so poorly on mobile. It's rendering to a pixel width larger than the display (and zoomed to fit).

For the "plain text" look set the font family to monospace. Bam readable and responsive "plain text" look.

in CSS you can do "max-width: 40ch" on smaller devices if you want. For fancy decorations you'd need need to draw them with css and/or pseudo elements.

  pre{ 
  max-width: 40ch !important;
 white-space: normal;
  }

Good idea. I didn't know about ch units.

I experimented with setting a fixed vw width, which kinda works, but at the end of the day 80 characters is probably just too much.

On desktop I force most text to be 60ch width max. Breaks a few sites but overall as great for HN comments for example.

  *:not(#tinymce) p{ 
    max-width: 60ch !important;
  }