Commit 19ba5f9e843 for woocommerce
commit 19ba5f9e84376d0051ae871c0178582ebe0c4cd3
Author: Eason <eason.su.tw@gmail.com>
Date: Tue Sep 29 19:52:21 2026 +0800
Fix billing and shipping addresses breaking mid-word in emails (#69140)
* Stop splitting billing and shipping addresses mid-word in emails
The `.address` rule in email-styles.php used `word-break: break-all`, so
billing and shipping addresses broke at any character, even when a
break between words would fit.
Use `overflow-wrap: anywhere` instead, with `word-break: break-word` as
a fallback for Gmail, which removes `overflow-wrap`. Both still let a
long email address wrap inside its table cell, which PR #57448 needed
to keep the other address column from being squashed.
* Keep long email addresses wrapping in clients without break-word
Outlook on Windows and Orange webmail support only
`word-break: break-all`, so after the previous commit a long billing
email address widened its cell there and squashed the shipping column
again (the PR #57448 case).
Wrap the billing email in a span and give it `word-break: break-all`.
An email address has no words to keep whole, so breaking it at any
character is fine, while the rest of the address still wraps between
words.
Address: https://github.com/woocommerce/woocommerce/pull/69140#pullrequestreview-5338567103
* Fix long email address widening the address column in Outlook
Outlook on Windows ignores word-break on inline elements, so the
break-all rule on the span had no effect there and a long billing email
still squashed the shipping column. Tested in Email on Acid, the rule
works once the email is in a block element.
Hook output after the email, like core's additional checkout fields,
starts with a <br>. After a block element that <br> adds an empty line,
so it is hidden. Classic emails drop it on the server with the other
display: none elements, so Outlook never sees it.
---------
Co-authored-by: Rostislav Wolny <rosta.wolny@automattic.com>
diff --git a/plugins/woocommerce/changelog/fix-69132-email-address-word-break b/plugins/woocommerce/changelog/fix-69132-email-address-word-break
new file mode 100644
index 00000000000..90789c6a7b3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-69132-email-address-word-break
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Stop splitting billing and shipping addresses in the middle of words in order emails.
diff --git a/plugins/woocommerce/templates/emails/email-addresses.php b/plugins/woocommerce/templates/emails/email-addresses.php
index e400bfe81c8..65a2ef2312f 100644
--- a/plugins/woocommerce/templates/emails/email-addresses.php
+++ b/plugins/woocommerce/templates/emails/email-addresses.php
@@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates\Emails
- * @version 10.6.0
+ * @version 11.3.0
*/
use Automattic\WooCommerce\Utilities\FeaturesUtil;
@@ -53,7 +53,7 @@ $display_section_divider = (bool) apply_filters( 'woocommerce_email_body_display
<br/><?php echo wc_make_phone_clickable( $order->get_billing_phone() ); ?>
<?php endif; ?>
<?php if ( $order->get_billing_email() ) : ?>
- <br/><?php echo esc_html( $order->get_billing_email() ); ?>
+ <div class="address-email"><?php echo esc_html( $order->get_billing_email() ); ?></div>
<?php endif; ?>
<?php
/**
diff --git a/plugins/woocommerce/templates/emails/email-styles.php b/plugins/woocommerce/templates/emails/email-styles.php
index 325e48fc0ad..17819a71a1b 100644
--- a/plugins/woocommerce/templates/emails/email-styles.php
+++ b/plugins/woocommerce/templates/emails/email-styles.php
@@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates\Emails
- * @version 11.0.0
+ * @version 11.3.0
*/
use Automattic\WooCommerce\Internal\Email\EmailFont;
@@ -361,9 +361,29 @@ body {
color: <?php echo esc_attr( $text_lighter_20 ); ?>;
border: 1px solid <?php echo esc_attr( $body_darker_10 ); ?>;
<?php } ?>
+ /*
+ * Break a word only when it is too long for the cell, so it can't squash the other address column.
+ * "anywhere" is used because "overflow-wrap: break-word" still lets a long word widen a table cell.
+ * "word-break: break-word" does the same as "anywhere" and is needed because Gmail removes "overflow-wrap".
+ */
+ overflow-wrap: anywhere;
+ word-break: break-word;
+}
+
+/*
+ * Some clients, like Outlook on Windows, support neither value above, so a long email address would still widen the cell there.
+ * "break-all" works in those clients, and it is safe for an email address because it has no words to keep whole.
+ * The email is a block element because Outlook on Windows ignores "word-break" on inline elements like a span.
+ */
+.address-email {
word-break: break-all;
}
+/* Hook output after the email usually starts with a <br>, which would leave an empty line after the block element. */
+.address-email + br {
+ display: none;
+}
+
<?php if ( $email_improvements_enabled ) : ?>
#addresses td + td {
padding-<?php echo is_rtl() ? 'right' : 'left'; ?>: 10px !important;