WordPress.org
Get WordPress

Make WordPress Core

Changeset 45258


Ignore:
Timestamp:
04/23/2019 07:47:14 PM (5 years ago)
Author:
laurelfulford
Message:

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.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r44149 r45258  
    1616        flex-wrap: wrap;
    1717        .widget {
     18            -webkit-hyphens: auto;
     19            -moz-hyphens: auto;
     20            -ms-hyphens: auto;
     21            hyphens: auto;
    1822            width: 100%;
     23            word-wrap: break-word;
    1924            @include media(desktop) {
    2025                margin-right: calc(3 * #{$size__spacing-unit});
    … …  
    2631    .site-info {
    2732        color: $color__text-light;
     33        -webkit-hyphens: auto;
     34        -moz-hyphens: auto;
     35        -ms-hyphens: auto;
     36        hyphens: auto;
     37        word-wrap: break-word;
    2838
    2939        a {

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

    r44149 r45258  
    3131
    3232    color: $color__text-light;
     33    -webkit-hyphens: auto;
     34    -moz-hyphens: auto;
     35    -ms-hyphens: auto;
     36    hyphens: auto;
    3337    position: relative;
     38    word-wrap: break-word;
    3439
    3540    @include media(tablet) {

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

    r44650 r45258  
    88
    99.comments-area {
     10    -webkit-hyphens: auto;
     11    -moz-hyphens: auto;
     12    -ms-hyphens: auto;
     13    hyphens: auto;
    1014    margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
     15    word-wrap: break-word;
    1116    @include postContentMaxWidth();
    1217

  • trunk/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss

    r44650 r45258  
    146146.comments-title,
    147147blockquote {
     148    -webkit-hyphens: auto;
     149    -moz-hyphens: auto;
     150    -ms-hyphens: auto;
    148151    hyphens: auto;
    149152    word-break: break-word;
     153    word-wrap: break-word;
    150154}
    151155
    … …  
    153157.entry-title {
    154158    @include media(tablet) {
     159        -webkit-hyphens: none;
     160        -moz-hyphens: none;
     161        -ms-hyphens: none;
    155162        hyphens: none;
    156163    }

  • trunk/src/wp-content/themes/twentynineteen/style-rtl.css

    r45057 r45258  
    23882388.comments-title,
    23892389blockquote {
     2390  -webkit-hyphens: auto;
     2391  -moz-hyphens: auto;
     2392  -ms-hyphens: auto;
    23902393  hyphens: auto;
    23912394  word-break: break-word;
     2395  word-wrap: break-word;
    23922396}
    23932397
    … …  
    23952399@media only screen and (min-width: 768px) {
    23962400  .entry-title {
     2401    -webkit-hyphens: none;
     2402    -moz-hyphens: none;
     2403    -ms-hyphens: none;
    23972404    hyphens: none;
    23982405  }
    … …  
    37293736.site-branding {
    37303737  color: #767676;
     3738  -webkit-hyphens: auto;
     3739  -moz-hyphens: auto;
     3740  -ms-hyphens: auto;
     3741  hyphens: auto;
    37313742  position: relative;
     3743  word-wrap: break-word;
    37323744}
    37333745
    … …  
    45094521
    45104522.comments-area {
     4523  -webkit-hyphens: auto;
     4524  -moz-hyphens: auto;
     4525  -ms-hyphens: auto;
     4526  hyphens: auto;
    45114527  margin: calc(2 * 1rem) 1rem;
     4528  word-wrap: break-word;
    45124529  /* Add extra margin when the comments section is located immediately after the
    45134530     * post itself (this happens on pages).
    … …  
    50245041
    50255042#colophon .widget-column .widget {
     5043  -webkit-hyphens: auto;
     5044  -moz-hyphens: auto;
     5045  -ms-hyphens: auto;
     5046  hyphens: auto;
    50265047  width: 100%;
     5048  word-wrap: break-word;
    50275049}
    50285050
    … …  
    50365058#colophon .site-info {
    50375059  color: #767676;
     5060  -webkit-hyphens: auto;
     5061  -moz-hyphens: auto;
     5062  -ms-hyphens: auto;
     5063  hyphens: auto;
     5064  word-wrap: break-word;
    50385065}
    50395066

  • trunk/src/wp-content/themes/twentynineteen/style.css

    r45032 r45258  
    23882388.comments-title,
    23892389blockquote {
     2390  -webkit-hyphens: auto;
     2391  -moz-hyphens: auto;
     2392  -ms-hyphens: auto;
    23902393  hyphens: auto;
    23912394  word-break: break-word;
     2395  word-wrap: break-word;
    23922396}
    23932397
    … …  
    23952399@media only screen and (min-width: 768px) {
    23962400  .entry-title {
     2401    -webkit-hyphens: none;
     2402    -moz-hyphens: none;
     2403    -ms-hyphens: none;
    23972404    hyphens: none;
    23982405  }
    … …  
    37353742.site-branding {
    37363743  color: #767676;
     3744  -webkit-hyphens: auto;
     3745  -moz-hyphens: auto;
     3746  -ms-hyphens: auto;
     3747  hyphens: auto;
    37373748  position: relative;
     3749  word-wrap: break-word;
    37383750}
    37393751
    … …  
    45154527
    45164528.comments-area {
     4529  -webkit-hyphens: auto;
     4530  -moz-hyphens: auto;
     4531  -ms-hyphens: auto;
     4532  hyphens: auto;
    45174533  margin: calc(2 * 1rem) 1rem;
     4534  word-wrap: break-word;
    45184535  /* Add extra margin when the comments section is located immediately after the
    45194536     * post itself (this happens on pages).
    … …  
    50305047
    50315048#colophon .widget-column .widget {
     5049  -webkit-hyphens: auto;
     5050  -moz-hyphens: auto;
     5051  -ms-hyphens: auto;
     5052  hyphens: auto;
    50325053  width: 100%;
     5054  word-wrap: break-word;
    50335055}
    50345056
    … …  
    50425064#colophon .site-info {
    50435065  color: #767676;
     5066  -webkit-hyphens: auto;
     5067  -moz-hyphens: auto;
     5068  -ms-hyphens: auto;
     5069  hyphens: auto;
     5070  word-wrap: break-word;
    50445071}
    50455072
Note: See TracChangeset for help on using the changeset viewer.