HTMLにある機能を使えばいいものを、手を抜こうとしたらしっぺ返しを食らった、そんな話です。
長い長い、識別子
プログラミングをやっていると、時折example_of_very_very_long_identifier_nameやexampleOfVeryVeryLongIdentifierNameのように、えんえん長い識別子が誕生してしまいます。これをふつうにHTMLへ表示すれば、アンダーバーや大文字小文字の境界は単語の区切りとして認識されないので、改行が発生せずに行を突き抜ける、などのトラブルを生んでしまいます1。
手抜きの手法
表示されるものを制御する上で、タグのない文字列からタグ入りの文字列にしようとすれば（XSSなどを防ぐために）それなりの工数がかかりますが、同じ文字列であればほぼ変化なく運用できます。ということで、改行したい位置にゼロ幅スペースを投入して表示させたところ、きれいに表示がなされました。
思わぬしっぺ返し
そこまではよかったのですが、ある時コードが意味不明なエラーを吐くようになりました。調べてみると、ゼロ幅スペース入りのものをコピペしてしまったがために、コードとして成立せずエラーとなってしまったのでした。しかも、ゼロ幅なだけあって肉眼には全く見えないので、探すのも厄介でした。
正しい方法
手を抜いたのがすべての元凶、ということで、きちんとHTMLでスタイリングすることとしました。<wbr>というタグがあって、「ここで改行していい」という指示ができます（MDN）。アンダーバーで切り分けて、適宜<wbr>と絡ませれば、コピペしても問題なく表示できるようになりました。
教訓
- 見えない文字が混入すると厄介
- コピペする前提のものは、きちんとHTMLでスタイリングしよう
-
Qiitaはプログラムコード入りの文章を書くことが前提のサイトということもあって、
<body>レベルでword-wrap: break-wordをかけてありました。 ↩