今回は、Onsen UI V2のons-list-itemタグ内で、文章をbrタグで改行するとspanタグで余計な改行が入り、レイアウトがズレてしまう問題について、その解決方法を説明します。
問題のHTMLです。
特に変わったことは行っていません。
<ons-list>
<ons-list-item modifier="longdivider">
いつもご利用いただきありがとうございます。<br>
年末年始の休日についてお知らせします。<br>
年末年始の休日：<span style="color:#f00;font-weight:bolder;">12/27～1/4</span><br>
今後ともよろしくお願いします。
</ons-list-item>
</ons-list>そこでspanタグを含んだ文章をdivタグで囲ってみます。
<ons-list>
<ons-list-item modifier="longdivider">
<div>
いつもご利用いただきありがとうございます。<br>
年末年始の休日についてお知らせします。<br>
年末年始の休日：<span style="color:#f00;font-weight:bolder;">12/27～1/4</span><br>
今後ともよろしくお願いします。
</div>
</ons-list-item>
</ons-list>見事にレイアウトのズレがなくなりました。
残念ながら、Onsen UI V2は 2022年12月の Ver.2.12.8 を最後に更新が停止しています。
今回のような問題は過去にもさまざまありましたが、これまでは 利用者側の工夫で対処してきました。
とはいえ、Flutterなど現在主流となっている技術へ移行を検討すべき時期なのかもしれないと感じています。
 | 新品価格 |
