CSSのみでは折り返しの問題を解決できないので、以前から80文字ごとに見えない文字("‌​
")を挿入していました。
この80文字という基準は西洋の言語ではちょうどいいのですが、日本語・中国語などの文字幅が広い言語、それから等幅ブロックでは、60文字前後で折り返す必要があるようです。
そこでどちらの言語でもうまく折り返すことができるように、見えない文字を20文字ずつに挿入するようにします。これで60文字・80文字どちらか適切な長さで折り返されるはずです。
次回のビルドに適用します。
There is no suitable CSS-only fix for this problem. What we did in the past was inserting an invisible optional line break ("‌​
") every 80 characters.
Unfortunately, the default of 80 is optimal for western alphabets and writing, but does not work for languages whose fonts are larger (Japanese, Chinese) and for monospace text
. The ideal size for those is breaking around 60 characters.
To accommodate both needs I've changed the code so we insert the invisible breaks every 20 characters. This should allow breaking at 60 and at 80, depending on what fits.
This will be out in the next deployment.
.comment-text code
というCSSステートメントにdisplay: inline-block
を加えると、この問題を解決できるようです。しかし、古いブラウザーなどではdisplay: inline-block
を使っていたらcode
タグは正常に表示されるかどうかはよく分かりません。inline-block
を使ったら、ワードブレイクにまで副作用もあるかもしれません。table
という要素は内部のHTML要素のコンテンツによって自動に拡張していると思うので、div
には固定幅を設定するのが解決になるかもしれません。例えば、td.comment-text div.comment-body: {width: 630px;}
など。max-width: 640px
とかを使ったら、問題を軽減できると思います。