【解決済】発送完了メール（ＨＴＭＬ形式）で表示が崩れます

[Alicia]

いつもお世話になりありがとうございます。

送り状番号をクエリパラメータに追加しているＵＲＬ部分ですが、英単語の禁則処理が働いて適切に改行がなされず、結果的に width: calc( 100% – 100px )が効いてないようです。

とりあえず以下のように修正したところ、表示崩れがなくなりました。

usc-e-shop/functions/emails.php
1044行目

$msg_shipping .= '<td style="padding: 0 0 10px 50px; width: calc( 100% - 100px ); word-break: break-all;">' . $tracking_number . '<p>' . __( '[*]', 'usces' ) . __( 'You can check delivery situation from the following URL.', 'usces' ) . '</p>';

お忙しいところ恐縮ですが、ご確認よろしくお願いいたします。

——————————————-
テスト環境
WordPress ver： 6.2.2-ja
Welcart ver : 2.8.18
PHP ver ： 8.0.25
Welcart専用の拡張プラグインとバージョン：－
親テーマ : Welcart Basic　ver : 1.7.7
子テーマ : –
症状を確認したブラウザ：Chrome 114.0.5735.199
サーバー【重要】：（会社名、サービス名）: Xserver シン・レンタルサーバー　ベーシック
——————————————–
上記以外のプラグインをすべて無効化

• このトピックはfurutaが9ヶ月、 3週前に変更しました。

[yasumax]

ご報告ありがとうございます。症状を確認いたしました。
Welcartの次期バージョンにて対応させていただきますので、少しお時間をいただければと思います。

word-break: break-all;の場合は短い単語でも途中で改行してしまうことがあるため、word-break: break-word;を追加する予定です。

[Alicia]

yasumax 様

お忙しいところご確認ありがとうございました。

word-break: break-word

私も試してみたんですが、非推奨となっていたのと、ゆうパックなど配送会社によっては、かなり手前で改行されてしまって大きな空白が入り違和感があったので、break-all; を選びました。
このあたりは、人によって好みがあるのかもしれませんね。

御社にお任せいたします。
では、よろしくお願いいたします。

[yasumax]

Alicia 様

ご指摘ありがとうございます。
word-break: break-word;は一般的なブラウザで効きはしますが、非推奨となっておりました。

ただ、td自体をword-break: break-all;にしてしまうと英語で運用しているサイトの場合、意図しない単語の途中で改行してしまうということが起こってきます。
そのため、tdに対してはoverflow-wrap: anywhere;を付与し、リンクに対してはword-break: break-all;を付与するという対応を次期バージョンにて対応させていただきます。

[Alicia]

yasumax　様

素晴らしいアイデアですね。
よろしくお願いいたします。

[yasumax]

Alicia 様

こんにちは。
本日リリースしたWelcart2.8.19で対応いたしました。
自動更新されていると思いますので、症状が改善されているか確認いただければ幸いです。

[Alicia]

yasumax　様 yskysmr 様

Welcart Ver.2.8.19 の修正を確認いたしました。

バグ報告が急でしたのに今回のアップデートに間に合わせていただきまして感謝いたします。

周辺の$formtag をフックで変更してデザインを考えていたタイミングでしたので、作業を止めていました。お陰様で再開できそうです。

この度は、大変お世話になりありがとうございました。　こちら解決済みとしてください。

[投稿者]

投稿