primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #880 from primer/wb-break-word

Browse Source 
Add .break-word, improve word-break docs
This commit is contained in:
Shawn Allen 2019-09-05 15:22:13 -07:00 committed by GitHub
commit 2e364037a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/content/utilities/typography.md
View File

@ -93,7 +93,6 @@ Change the font weight, styles, and alignment with these utilities.
<p class="text-uppercase">Uppercase</p>
<p class="no-wrap">No wrap</p>
<p class="ws-normal">Normal whitespace</p>
<p class="wb-break-all">Line break long lines</p>
<p class="text-underline">Text underline</p>
<p class="no-underline">No underline</p>
<p class="text-emphasized">Emphasized</p>
@ -103,6 +102,19 @@ Change the font weight, styles, and alignment with these utilities.
<p class="user-select-none">User Select None</p>
```
## Word-break
There are two utilities for adjusting how lines and words of text break when they exceed the width of their containing element:
1. `break-word` sets `word-break: break-word` and `overflow-wrap: break-word`, which will only break words if they would exceed the line length _after wrapping_.
2. `wb-break-all` sets `word-break: break-all`, which will force a word to break regardless of whether it's shorter than the line length. See [MDN's `word-break` docs](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values) for more info.
```html live
<p class="break-word p-2 bg-gray col-3 border-right">.break-word will only break long words that exceed the line length, such as supercalifragilisticexpialidocious. Long words like "exceedingly" will simply break to the next line.</p>
<p class="wb-break-all p-2 bg-gray col-3 border-right">.wb-break-all will break any word that meets the end its line, and should be used sparingly. As you can see here, it's not particularly nice to read text that breaks in weird places.</p>
```
## Text alignment
Use text alignment utilities to left align, center, or right align text.

20
src/utilities/typography.scss
View File

@ -184,7 +184,25 @@
.no-wrap { white-space: nowrap !important; }
/* Normal white space */
.ws-normal { white-space: normal !important; }
/* Allow long lines with no spaces to line break */
/* Force long "words" to wrap if they exceed the width of the container */
.break-word {
word-break: break-word !important;
// this is for backwards compatibility with browsers that don't respect overflow-wrap
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/*
* Specifically apply word-break: break-all; per MDN:
*
* > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`,
* > `word-break: break-all` will create a break at the exact place where text would
* > otherwise overflow its container (even if putting an entire word on its own line
* > would negate the need for a break).
*
* see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
*/
.wb-break-all { word-break: break-all !important; }
.text-emphasized {