Twenty Nineteen: Prevent too-long strings from causing horizontal scrolling.

Add hyphen and word-wrap styles to the site title, comments, and widget areas to break too-long strings and prevent horizontal scrolling.

Props ianbelanger, dswebsme, mukesh27.
Fixes #46704.


Built from https://develop.svn.wordpress.org/trunk@45258


git-svn-id: http://core.svn.wordpress.org/trunk@45067 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss

@@ -15,7 +15,12 @@
 		display: flex;
 		flex-wrap: wrap;
 		.widget {
+			-webkit-hyphens: auto;
+			-moz-hyphens: auto;
+			-ms-hyphens: auto;
+			hyphens: auto;
 			width: 100%;
+			word-wrap: break-word;
 			@include media(desktop) {
 				margin-right: calc(3 * #{$size__spacing-unit});
 				width: calc(50% - (3 * #{$size__spacing-unit}));
@@ -25,6 +30,11 @@
 
 	.site-info {
 		color: $color__text-light;
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+		word-wrap: break-word;
 
 		a {
 			color: inherit;

wp-content/themes/twentynineteen/sass/site/header/_site-header.scss

@@ -30,7 +30,12 @@
 .site-branding {
 
 	color: $color__text-light;
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
 	position: relative;
+	word-wrap: break-word;
 
 	@include media(tablet) {
 		margin: 0 $size__site-margins;

wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -7,7 +7,12 @@
 }
 
 .comments-area {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
 	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+	word-wrap: break-word;
 	@include postContentMaxWidth();
 
 	@include media(tablet) {

wp-content/themes/twentynineteen/sass/typography/_headings.scss

@@ -145,13 +145,20 @@ h6 {
 .error-404 .page-title,
 .comments-title,
 blockquote {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
 	hyphens: auto;
 	word-break: break-word;
+	word-wrap: break-word;
 }
 
 /* Do not hyphenate entry title on tablet view and bigger. */
 .entry-title {
 	@include media(tablet) {
+		-webkit-hyphens: none;
+		-moz-hyphens: none;
+		-ms-hyphens: none;
 		hyphens: none;
 	}
 }

wp-content/themes/twentynineteen/style-rtl.css

@@ -2387,13 +2387,20 @@ h6 {
 .error-404 .page-title,
 .comments-title,
 blockquote {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
   word-break: break-word;
+  word-wrap: break-word;
 }
 
 /* Do not hyphenate entry title on tablet view and bigger. */
 @media only screen and (min-width: 768px) {
   .entry-title {
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
     hyphens: none;
   }
 }
@@ -3728,7 +3735,12 @@ body.page .main-navigation {
 
 .site-branding {
   color: #767676;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   position: relative;
+  word-wrap: break-word;
 }
 
 @media only screen and (min-width: 768px) {
@@ -4508,7 +4520,12 @@ body.page .main-navigation {
 }
 
 .comments-area {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   margin: calc(2 * 1rem) 1rem;
+  word-wrap: break-word;
   /* Add extra margin when the comments section is located immediately after the
 	 * post itself (this happens on pages).
 	 */
@@ -5023,7 +5040,12 @@ body.page .main-navigation {
 }
 
 #colophon .widget-column .widget {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   width: 100%;
+  word-wrap: break-word;
 }
 
 @media only screen and (min-width: 1168px) {
@@ -5035,6 +5057,11 @@ body.page .main-navigation {
 
 #colophon .site-info {
   color: #767676;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-wrap: break-word;
 }
 
 #colophon .site-info a {

wp-content/themes/twentynineteen/style.css

@@ -2387,13 +2387,20 @@ h6 {
 .error-404 .page-title,
 .comments-title,
 blockquote {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
   word-break: break-word;
+  word-wrap: break-word;
 }
 
 /* Do not hyphenate entry title on tablet view and bigger. */
 @media only screen and (min-width: 768px) {
   .entry-title {
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
     hyphens: none;
   }
 }
@@ -3734,7 +3741,12 @@ body.page .main-navigation {
 
 .site-branding {
   color: #767676;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   position: relative;
+  word-wrap: break-word;
 }
 
 @media only screen and (min-width: 768px) {
@@ -4514,7 +4526,12 @@ body.page .main-navigation {
 }
 
 .comments-area {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   margin: calc(2 * 1rem) 1rem;
+  word-wrap: break-word;
   /* Add extra margin when the comments section is located immediately after the
 	 * post itself (this happens on pages).
 	 */
@@ -5029,7 +5046,12 @@ body.page .main-navigation {
 }
 
 #colophon .widget-column .widget {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   width: 100%;
+  word-wrap: break-word;
 }
 
 @media only screen and (min-width: 1168px) {
@@ -5041,6 +5063,11 @@ body.page .main-navigation {
 
 #colophon .site-info {
   color: #767676;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-wrap: break-word;
 }
 
 #colophon .site-info a {

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-beta3-45257';
+$wp_version = '5.2-beta3-45258';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.