diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor #25138 [TwigBundle] Exception page: prefer overflow-wrap to word-break (julienfalque)

Browse Source 
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:
Fabien Potencier 2017-11-24 05:42:52 -08:00
commit 5c954c79c0
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig
View File

@ -22,7 +22,7 @@ table th { background-color: #E0E0E0; font-weight: bold; text-align: left; }
.hidden { display: none; }
.nowrap { white-space: nowrap; }
.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-muted { color: #999; }
.text-bold { font-weight: bold; }