<section>
  <h2>URLs and Line Breaks</h2>
  <p><cite>The Chicago Manual of Style</cite> recommends breaking long URLs (see <a href="#fig1">fig. 1</a>):</p>
  <ul>
    <li><em>After</em> a colon or a double slash (//)</li>
    <li><em>Before</em> a single slash (/), a tilde (~), a period, a comma, a hyphen, and underline (_), a question mark, a number sign, or a percent symbol</li>
    <li><em>Before or after</em> an equals sign or an ampersand (&)</li>
  </ul>
  <figure id="fig1">
    <figcaption>Try resizing your browser window to see how these URLs wrap.</figcaption>
    <p class="url">http://press-pubs.uchicago.edu/founders/</p>
    <p class="url">http://www.jstor.org/sable/2921689</p>
    <p class="url">http://www.themillions.com/2015/04/to-fall-in-love-with-a-reader-do-this.html</p>
    <p class="url">http://content.time.com/time/magazine/article/0,9171,920400,00.html</p>
    <p class="url">http://www.sceintificstyleandformat.org/</p>
    <p class="url">http://www.amazon.com/s/ref=sr_nr_i_o?rh=k%3Ashark+vacuum%2Ci%3Agarden&keywords=shark+vacuum&ie=UTF8&qid=1327784979</p>
  </figure>
  <p>These rules are especially important when displaying urls in a bibliography or reference list.</p>
</section>
<section class="example">
  <h2>References</h2>
  <p class="hanging"><cite>Chicago Manual of Style</cite>. 2017. 17th ed. Chicago: University of Chicago Press. <a href="https://www.chicagomanualofstyle.org/book/ed17/part3/ch14/psec018.html">https://www.chicagomanualofstyle.org/book/ed17/part3/ch14/psec018.html</a>.</p>
</section>
:root {
  --border: 1px solid gray;
}

html {
  font-size: 1.25em;
  line-height: 1.2;
}

h2,
figcaption:before {
  font-family: sans-serif;
}

section {
  counter-reset: figure;
}

figure {
  border-block-start: var(--border);
  border-block-end: var(--border);
  margin: 1em 0;
  padding: 1em 0;
}

figcaption:before {
  content: "Figure " counter(figure) ". ";
  counter-increment: figure;
  font-weight: bold;
  font-variant: all-small-caps;
}

pre {
  background-color: black;
  border-radius: 0.5em;
  color: white;
  overflow-x: auto;
  padding: 1em;
}

.hanging {
  text-indent: -5ch;
  margin-left: 5ch;
}

.hanging a {
  color: inherit;
  text-decoration: none;
}
// From figure 1
var urls = document.querySelectorAll(".url");

// From the reference list
var refs = document.querySelectorAll(".hanging a");

// Add code examples to the URLs in figure 1
urls.forEach((url) => {
  var formatted = formatUrl(url.innerHTML);

  return (url.innerHTML = `${formatted}<br><pre><code>${sanitize(
    formatted
  )}</code></pre>`);
});

// Only format the URLs in the reference list
refs.forEach((url) => {
  var formatted = formatUrl(url.innerHTML);

  return (url.innerHTML = formatted);
});

/**
 * Insert word break opportunities into a URL
 * @param {string} url A URL to format
 * @return {string} A formatted URL
 * @see {@link https://www.chicagomanualofstyle.org/book/ed17/part3/ch14/psec018.html Chicago Manual of Style 14.18}
 * @see Turabian 2018, 20.4.2
 */
function formatUrl(url) {
  // Split the URL into an array to distingish double slashes from single slashes
  var doubleSlash = url.split("//");

  // Format the strings on either side of double slashes separately
  var formatted = doubleSlash
    .map(
      (str) =>
        // Insert a word break opporunity after a colon
        str
          .replace(/(?<after>:)/giu, "$1<wbr>")
          // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol
          .replace(/(?<before>[/~.,\-_?#%])/giu, "<wbr>$1")
          // Before and after an equals sign or ampersand
          .replace(/(?<equals>=)/giu, "<wbr>$1<wbr>")
          .replace(/(?<ampersand>&amp;)/giu, "<wbr>&<wbr>")

      // Reconnect the strings with word break opportunities after double slashes
    )
    .join("//<wbr>");

  return formatted;
}

/**
 * Sanitize an HTML string
 * @param  {string} str A raw string
 * @return {string} str A sanitized string
 */
function sanitize(str) {
  var temp = document.createElement("div");
  temp.textContent = str;

  return temp.innerHTML;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.