rubyタグ内の改行について。Chrome,Firefox,Edgeで表示を統一したい。

前提

htmlタグのrubyを用いてルビをふっている文字列があるのですが、widthの値で改行した時の挙動がChrome,Firefox,Edgeで異なります。
これを統一したいのですが、https://www.w3.org/
などを参考にしても言及されておらず、検索しても良い例がかかりません。

rubyタグの正しい扱い方がありましたらお教えください。

実現したいこと

ruby内を左揃えにしたいのです。
text-align:leftも（古いのかもしれませんが）ruby-align:leftも効きません。

以下の様な表示にしたい

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

Chrome,Edgeでは一番下の行が左右均等分散の様な形になってしまいます。

Firefoxでは改行すらしてくれません。

該当のソースコード

html

<p style="width:108px;"> <ruby> <rb>寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末</rb> <rt>じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ</rt> </ruby></p>

試したこと

・text-align:left;
・検索してruby-alignというのに行き着いたので試してみましたがダメでした。
・Firefoxでは<br>タグさえ無視されてしまいます。
・Firefoxではword-break: break-all;も無視されます。
・W3Cページでrubyについて調べましたが特筆すべき点は見つかりませんでした。

ひとまずrubyを使うのが正しいのだと思い使っていますが、扱いにくいのでpタグやspanタグなどに入れえる事も視野に入れておりますが、その前にrubyタグの正しい扱い方がありましたらお教えください。