minor #25138 [TwigBundle] Exception page: prefer overflow-wrap to word-break (julienfalque)
This PR was merged into the 3.3 branch.
Discussion
----------
[TwigBundle] Exception page: prefer overflow-wrap to word-break
| Q | A
| ------------- | ---
| Branch? | 3.3
| Bug fix? | yes-ish
| New feature? | no
| BC breaks? | no
| Deprecations? | no
| Tests pass? | yes
| Fixed tickets | -
| License | MIT
| Doc PR | -
This prevents arbitrary text wrapping, breaks are always made on whitespace when possible:
**Before**
![long-before](https://user-images.githubusercontent.com/1736542/33190369-4c23fb88-d0ac-11e7-8c4d-60e60fc06b83.png)
**After**
![long-after](https://user-images.githubusercontent.com/1736542/33190370-4e449a4e-d0ac-11e7-90bd-6dacca10e9fd.png)
Random breaks inside words can still be made for very long words:
**Before**
![very-long-before](https://user-images.githubusercontent.com/1736542/33190387-83a3572a-d0ac-11e7-8d6b-c19b3812c339.png)
**After**
![very-long-after](https://user-images.githubusercontent.com/1736542/33190388-84cf6724-d0ac-11e7-9756-bb34a0a64bb8.png)
Tested on Chrome 62 (Linux) and Firefox 47 (Linux).
Commits
-------
c7333b1c68
Prefer overflow-wrap to word-break
This commit is contained in:
commit
5c954c79c0
@ -22,7 +22,7 @@ table th { background-color: #E0E0E0; font-weight: bold; text-align: left; }
|
|||||||
.hidden { display: none; }
|
.hidden { display: none; }
|
||||||
.nowrap { white-space: nowrap; }
|
.nowrap { white-space: nowrap; }
|
||||||
.newline { display: block; }
|
.newline { display: block; }
|
||||||
.break-long-words { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
|
.break-long-words { word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; min-width: 0; }
|
||||||
.text-small { font-size: 12px !important; }
|
.text-small { font-size: 12px !important; }
|
||||||
.text-muted { color: #999; }
|
.text-muted { color: #999; }
|
||||||
.text-bold { font-weight: bold; }
|
.text-bold { font-weight: bold; }
|
||||||
|
Reference in New Issue
Block a user