htmlの<ruby>で勝手に改行されてしまうのを防ぎたい

Question

前提・実現したいこと

<ruby>月火水木金土日<rt>げつかすいもくきんどにち</rt></ruby>
いつもこのような形で使用しています。

発生している問題・エラーメッセージ

「月火水木金土日」が途中で画面端に差し掛かったとき、「月火水木金土日」が先頭の「月」から次行に回されてしまいます。

例えば「月火水木金」のところまでで画面端に差し掛かったとしたら、「土日」以降を次行に改行したいのに、「月」から改行されてしまうということです。

該当のソースコード

【html5】

<p class="breakAll">文章文章文章文章文章文章文章<ruby>月火水木金土日<rt>げつかすいもくきんどにち</rt></ruby>文章文章文章文章文章</p>

【css3】
.breakAll {
word-break: break-all;
}

試したこと

word-breakは何やかんやと試しました。英語はいけるみたいですが、ルビではやはり改行されてしまいます。

補足情報（FW/ツールのバージョンなど）

何か足りない情報などあれば指摘お願いします。

Answer 1

いつもこのような形で使用しています。

使い方が悪いです。「閑話休題」に「それはさておき」と振るように、1文字1文字に切れない熟語ルビの場合はそのような振り方をするしかありませんが、漢字とルビの対応を取りたい場合は、1文字ずつ振っていくのが適切かと思います。

熟語ルビとして振ると、どこで切っていいのかわからないので、ひとかたまりとして扱うこととなります。

Comments

[biotoap]

思いつきませんでした！ありがとうございます、解決しました！