Breaking long words/urls

data/markdown-example-data.json

@@ -1,7 +1,7 @@
 {
   "header": "GitHub flavored markdown test",
   "headerImage": "https://i.kinja-img.com/gawker-media/image/upload/s--i-V_y0xb--/c_fit,fl_progressive,q_80,w_636/17z3k5lawpg2mjpg.jpg",
-  "body": "**Test:**\n\n`hej`\n\n_italic?_\n\n~~strikethrough :)~~\n\nhorizontal rule below\n\n---\n\n# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6\n\nMarkdown|Less|Pretty\n---|---|---\nStill|renders|nicely\n1|2|3\n4|5|6\n\n[I'm an inline-style link](https://www.google.com 'Google's Homepage')\n\n[You can use numbers for reference-style link definitions][1]\n[1]: https://reddit.com\n\n**Blockquotes:**\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.\n\n```html\n<awesome-sauce>\n  <p>This is great</p>\n</awesome-sauce>\n```\n\n```js\nconsole.log(\"hello\");\n```\n\n![cat picture](http://2static.fjcdn.com/pictures/Derp_f22399_6005436.jpg 'cat picture')\n\n1. First ordered list item\n2. Another item\n1. Actual numbers don't matter, just that it's a number\n\nLet's try an unordered list\n+ Yaay\n+ Let's try a long text so the line will break\n\n\n+ And let's try a long paragraph so the line will break\n\n+ I'm I still ok?",
+  "body": "**Test:**\n\n`hej`\n\n_italic?_\n\n~~strikethrough :)~~\n\nhorizontal rule below\n\n---\n\n# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6\n\nMarkdown|Less|Pretty\n---|---|---\nStill|renders|nicely\n1|2|3\n4|5|6\n\n[I'm an inline-style link](https://www.google.com 'Google's Homepage')\n\n[http://www.thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/](http://www.thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/)\n\n[You can use numbers for reference-style link definitions][1]\n[1]: https://reddit.com\n\n**Blockquotes:**\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.\n\n```html\n<awesome-sauce>\n  <p>This is great</p>\n</awesome-sauce>\n```\n\n```js\nconsole.log(\"hello\");\n```\n\n![cat picture](http://2static.fjcdn.com/pictures/Derp_f22399_6005436.jpg 'cat picture')\n\n1. First ordered list item\n2. Another item\n1. Actual numbers don't matter, just that it's a number\n\nLet's try an unordered list\n+ Yaay\n+ Let's try a long text so the line will break\n\n\n+ And let's try a long paragraph so the line will break\n\n+ I'm I still ok?",
   "author": {
     "name": "Klaus Nielsen",
     "mail": "[email protected]",

shared-markdown-styles.html

@@ -5,6 +5,13 @@
   <template>
 
     <style>
+      .markdown-html {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-word-break: break-all;
+        word-break: break-all;
+        word-break: break-word;
+      }
       .markdown-html h1,
       .markdown-html h2,
       .markdown-html h3,