From 46174924c524ec08d934cefb15a3bc4ca8a9ed5d Mon Sep 17 00:00:00 2001 From: Ihor Zenich Date: Wed, 23 Sep 2020 04:42:00 +0300 Subject: [PATCH 1/3] Fix text-break in IE and Edge Legacy --- scss/utilities/_text.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 5d0f1c845f8d..2dc390085603 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -63,8 +63,8 @@ .text-decoration-none { text-decoration: none !important; } .text-break { - word-break: break-word !important; // IE & < Edge 18 - overflow-wrap: break-word !important; + word-break: break-word !important; // we use deprecated `word-break: break-word` to avoid issues with flex containers + word-wrap: break-word !important; // we use `word-wrap` instead of the more common `overflow-wrap` for support IE & Edge Legacy } // Reset From e501897af6ae0383b0b4aade8c76468d0ca6fe00 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 24 Sep 2020 14:56:48 +0300 Subject: [PATCH 2/3] Update _text.scss --- scss/utilities/_text.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 2dc390085603..d062daeb33cd 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -63,7 +63,7 @@ .text-decoration-none { text-decoration: none !important; } .text-break { - word-break: break-word !important; // we use deprecated `word-break: break-word` to avoid issues with flex containers + word-break: break-word !important; // we use the deprecated `word-break: break-word` to avoid issues with flex containers word-wrap: break-word !important; // we use `word-wrap` instead of the more common `overflow-wrap` for support IE & Edge Legacy } From 2156eee9168fed923ae1c519461c4fdf3603befd Mon Sep 17 00:00:00 2001 From: Ihor Zenich Date: Fri, 25 Sep 2020 03:52:21 +0300 Subject: [PATCH 3/3] Added detailed comments about how .text-break works --- scss/utilities/_text.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index d062daeb33cd..62d596735fc2 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -63,8 +63,19 @@ .text-decoration-none { text-decoration: none !important; } .text-break { - word-break: break-word !important; // we use the deprecated `word-break: break-word` to avoid issues with flex containers - word-wrap: break-word !important; // we use `word-wrap` instead of the more common `overflow-wrap` for support IE & Edge Legacy + // We wan't to use `overflow-wrap: anywhere` to avoid issues with flex containers + // But `overflow-wrap` don't supported by IE and Edge Legacy at all + // and `overflow-wrap: anywhere` don't supported by Safari. + // So we use combination of word-break (modern browsers) + word-wrap (IE/Edge Legacy) + + // This value deprecated for modern browsers (and never supported by IE/Edge Legacy) + // The same as `word-break: normal` and `overflow-wrap: anywhere` (regardless of the actual value of the overflow-wrap property) + word-break: break-word !important; // all browsers except IE/Edge Legacy, working inside flex + + // Because `word-break: break-word` don't supported by IE/Edge Legacy we adding `word-wrap: break-word` which is old name for `overflow-wrap: break-word`. + // The same as `overflow-wrap: break-word` + // all browsers except IE/Edge legacy ignore it because of `word-break: break-word` above + word-wrap: break-word !important; // for IE/Edge Legacy, DON'T working inside flex } // Reset