DAHLIA Pattern Library

Link Wrap 

<div class="demo-padding_box padding" style="width: 350px;">
    &lt;a&gt; with .link-wrap
    <a class="link-wrap" href="#">
    https://smile.amazon.com/dp/B01J24C0TI/ref=ods_gw_d_kt_2pack_street?pf_rd_p=b77fecf2-bed7-4fa5-a11f-cea7545af6af&pf_rd_r=E9MSD5E40JYXHAX70Q40
  </a>

    <br> &lt;span&gt; without .link-wrap
    <br>
    <span href="#" style="color:blue;">
    https://smile.amazon.com/dp/B01J24C0TI/ref=ods_gw_d_kt_2pack_street?pf_rd_p=b77fecf2-bed7-4fa5-a11f-cea7545af6af&pf_rd_r=E9MSD5E40JYXHAX70Q40
  </span>
</div>
 
<div class="demo-padding_box padding" style="width: 350px;">
  &lt;a&gt; with .link-wrap
  <a class="link-wrap" href="#">
    https://smile.amazon.com/dp/B01J24C0TI/ref=ods_gw_d_kt_2pack_street?pf_rd_p=b77fecf2-bed7-4fa5-a11f-cea7545af6af&pf_rd_r=E9MSD5E40JYXHAX70Q40
  </a>

  <br>
  &lt;span&gt; without .link-wrap
  <br>
  <span href="#" style="color:blue;">
    https://smile.amazon.com/dp/B01J24C0TI/ref=ods_gw_d_kt_2pack_street?pf_rd_p=b77fecf2-bed7-4fa5-a11f-cea7545af6af&pf_rd_r=E9MSD5E40JYXHAX70Q40
  </span>
</div>
 
{
  "utilities": {
    "padding": [
      "padding--half",
      "padding-top--half",
      "padding-right--half",
      "padding-bottom--half",
      "padding-left--half",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "padding--3halves",
      "padding-top--3halves",
      "padding-right--3halves",
      "padding-bottom--3halves",
      "padding-left--3halves",
      "padding--2x",
      "padding-top--2x",
      "padding-right--2x",
      "padding-bottom--2x",
      "padding-left--2x"
    ],
    "margin": [
      "margin--half",
      "margin-top--half",
      "margin-right--half",
      "margin-bottom--half",
      "margin-left--half",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin--3halves",
      "margin-top--3halves",
      "margin-right--3halves",
      "margin-bottom--3halves",
      "margin-left--3halves",
      "margin--2x",
      "margin-top--2x",
      "margin-right--2x",
      "margin-bottom--2x",
      "margin-left--2x"
    ],
    "border-radius": [
      "radius",
      "radius-bottom"
    ],
    "border": [
      "border-bottom",
      "border-top",
      "border-left",
      "border-right",
      "border-bottom--primary",
      "border-top--primary",
      "border-left--primary",
      "border-right--primary",
      "no-border"
    ],
    "abs-position": [
      "a-top-right",
      "a-top-left",
      "a-bottom-right",
      "a-center"
    ]
  }
}

.link-wrap allows a link to wrap instead of sticking outside of its container. Note this behavior is added globally to all <a> tags in _links.scss, and so would only need to be added to other pieces of text e.g. with long URLs.