スマホトップページ編集貼り付け

Question

いつもお世話になっております。

楽天のスケッチページで作成した下記のHTMLをそのままスマートフォントップページ編集へ
貼り付けたのですが、画面で確認するとはみ出しています。
更新前は収まっていたのですが・・・。

どこが間違っているのでしょうか？
宜しくお願い致します。

-----------------------------------------------------------------------------
                                            ダディオダディ DaddyOhDaddy...  ダディオダディ DaddyOhDaddy...  ダディオダディ DaddyOhDaddy...  4,212円  5,292円  3,888円              エヴァンゲリオン tシャツ 半袖 キッズ...  子供服 tシャツ 半袖 キッズ 男の子 ...  恐竜柄 ザウルス キッドバウ KID B...  2,160円  1,998円  1,998円

Answer

ECマスターズの田中です。

私にて、いただいたソースを確認したのですが、
開始終了タグの対応漏れなどのミスは特に見当たらず、
問題はありませんでした。

貼り付ける際に、直上のを削除したり、
〜の中に挿入したりしていないか
改めてご確認いただき、
再度、貼り付けてみて、正常に表示されるかご確認いただけますでしょうか。

それでもはみ出る場合ですが、
私にてはみ出る現象が確認できておりませんので、
実際にはみ出ている様子をスクリーンショットとして撮影して
添付していただけますでしょうか。

Answer

ありがとうございます。

私のはiphoneなのですが、画面表示を拡大にしています。
更新する前ははみ出さずに問題はなかったのですが・・・。

画面表示を標準に戻すとはみ出しはなく収まっておりました。

どんな表示にしても対応できるようになっていればいいのですが。

何かお気付きの事がありましたらお願い致します。

Answer

ECマスターズの田中です。

私にて、iPhone6sの「拡大」表示にすると、
確かにはみ出している様子が確認できました。

原因を確認したところ、
商品名に含まれる「DaddyOhDaddy」の部分が
一つの単語として認識されてしまい、
幅不足で改行されるべきところが改行されなかった結果、
表示幅を拡げ、表全体の横幅を拡げるようになっておりました。

「DaddyOhDaddy」を一部削除する（Daddy... など）か、
商品名の文字サイズを小さくすることで
拡大表示時のはみ出しをなくすことができます。

ちなみに、CSSが使える場合は「word-wrap:break-word;」を指定することで
単語途中でも改行されるようになります。

Answer

お忙しい中ありがとうございます。

商品名を変更したところ、ちゃんと表示ができました。
とても勉強になりました。
貴重なお時間、本当にありがとうございました。