diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/article/00-link.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/article/00-link.twig
new file mode 100644
index 0000000000..c61a045b32
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/article/00-link.twig
@@ -0,0 +1,45 @@
+<p>HTML links and e-bolt-links inside e-bolt-article</p>
+<article style="max-width: 800px; margin: 0 auto;" class="e-bolt-article t-bolt-yellow u-bolt-padding-medium">
+  <a href="#!"><strong>HTML Link</strong> short</a>
+  <br />
+  <hr>
+  <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+  <br />
+  <hr>
+  <a href="#!" target="_blank" rel="noopener" class="e-bolt-text-link">This is a quite long text <strong>e-bolt-link</strong> to test if it wraps</a>
+  <br />
+  <hr>
+  <a href="#!" class="e-bolt-text-link"><span class="e-bolt-text-link__icon-before"><svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.8 13.5h-4.4v-4.3c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5v4.4h-4.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h4.4v4.4c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-4.4h4.4c.8 0 1.5-.7 1.5-1.5s-.9-1.6-1.7-1.6"/></g></svg></span>This is a text <strong>e-bolt-link</strong> with icons before and after<span class="e-bolt-text-link__icon-after"><svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#151619" fill-rule="evenodd" transform="translate(1 1)"><path d="m15 28.1c-7.2 0-13.1-5.9-13.1-13.1s5.9-13.1 13.1-13.1 13.1 5.9 13.1 13.1-5.9 13.1-13.1 13.1m0-29.1c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16"/><path d="m20.8 13.5h-4.4v-4.3c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5v4.4h-4.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h4.4v4.4c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-4.4h4.4c.8 0 1.5-.7 1.5-1.5s-.9-1.6-1.7-1.6"/></g></svg></span></a>
+  <br />
+  <hr>
+  <button type="reset" class="e-bolt-text-link">This looks like a text <strong>e-bolt-link</strong> but semantically is a reset button</button>
+  <br />
+  <hr>
+  <ul>
+  <li>
+  <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+  </li>
+  <li>
+    <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+    <ol>
+      <li>
+        <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+        <ul>
+          <li>
+            <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+          </li>
+          <li>
+            <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+      </li>
+    </ol>
+  </li>
+  <li>
+    <a href="#!" target="_blank" rel="noopener">https://<Strong>HTML-link</strong>.website.com/search?f%5B0%5D=content_type%3ASupport%20Doc&amp;f%5B1%5D=search_site_content_category%3AProduct&amp;f%5B2%5D=search_site_moderator_tag%3AHow%20To&amp;f%5B3%5D=search_site_moderator_tag%3ATroubleshooting</a>
+  </li>
+</ul>
+</article>
diff --git a/packages/elements/bolt-article/src/article.scss b/packages/elements/bolt-article/src/article.scss
index 621ad4ccfd..acaf65192e 100644
--- a/packages/elements/bolt-article/src/article.scss
+++ b/packages/elements/bolt-article/src/article.scss
@@ -9,6 +9,10 @@ $_bolt-article-element-spacing: var(--bolt-spacing-y-medium);
   color: var(--m-bolt-text);
   line-height: var(--bolt-type-line-height-medium);
 
+  a {
+    overflow-wrap: break-word;
+  }
+
   p,
   blockquote,
   figure,