Why do the content inside my html code element tag not wrap itself?

Question

I have this HTML code tag that contains code. Some of the code is quite long and I want it to wrap around to the next line instead of going outside the element block. However it is not working for me. Below is the code:

code {
  font-family: 'Source Code Pro', monospace;
  display: block;
  background-color: blue;
  color: #fafafa;
  border-radius: .5em;
  padding: 1em;
  word-wrap: break-word;
}

<code>const newsSources = [
    {
        name: "telegraph",
        domain: "https://www.telegraph.co.uk",
        url: "https://www.telegraph.co.uk/renewable-energy/",
    },
    {
        name: "the-guardian",
        domain: "https://www.theguardian.com",
        url: "https://www.theguardian.com/environment/renewableenergy",
    },
    {
        name: "the-times",
        domain: "https://www.thetimes.co.uk",
        url: "https://www.thetimes.co.uk/search?source=search-page&amp;q=renewable",
    },
    {
        name: "al-jazeera",
        domain: "https://www.aljazeera.com",
        url: "https://www.aljazeera.com/search/renewable"
    },
    {
        name: "recharge-news",
        domain: "https://www.rechargenews.com",
        url: "https://www.rechargenews.com/"
    },
    {
        name: "renewables-now",
        domain: "https://renewablesnow.com/news",
        url: "https://renewablesnow.com/"
    },
    {
        name: "science-daily",
        domain: "https://www.sciencedaily.com",
        url: "https://www.sciencedaily.com/search/?keyword=renewable#gsc.tab=0&amp;gsc.q=renewable&amp;gsc.page=1"
    },
    {
        name: "renewable-energy-magazine",
        domain: "https://www.renewableenergymagazine.com",
        url: "https://www.renewableenergymagazine.com/search?cx=partner-pub-7794467828055047%3A8692188386&amp;cof=FORID%3A9&amp;ie=UTF-8&amp;q=renewable"
    },
    {
        name: "world-energy-news",
        domain: "https://www.worldenergynews.com",
        url: "https://www.worldenergynews.com/news/search?search=renewable"
    }
];
</code>

I tried to switch between block and inline block for the display and to set the width but it did not make a difference.

How can I make the words wrap?

Answer 1

You can add white-space: pre-wrap; to override the browser default settings for the code tag:

code {
  font-family: 'Source Code Pro', monospace;
  display: block;
  background-color: blue;
  color: #fafafa;
  border-radius: .5em;
  padding: 1em;
  word-wrap: break-word;
  white-space: pre-wrap;
}

<code>const newsSources = [
    {
        name: "telegraph",
        domain: "https://www.telegraph.co.uk",
        url: "https://www.telegraph.co.uk/renewable-energy/",
    },
    {
        name: "the-guardian",
        domain: "https://www.theguardian.com",
        url: "https://www.theguardian.com/environment/renewableenergy",
    },
    {
        name: "the-times",
        domain: "https://www.thetimes.co.uk",
        url: "https://www.thetimes.co.uk/search?source=search-page&amp;q=renewable",
    },
    {
        name: "al-jazeera",
        domain: "https://www.aljazeera.com",
        url: "https://www.aljazeera.com/search/renewable"
    },
    {
        name: "recharge-news",
        domain: "https://www.rechargenews.com",
        url: "https://www.rechargenews.com/"
    },
    {
        name: "renewables-now",
        domain: "https://renewablesnow.com/news",
        url: "https://renewablesnow.com/"
    },
    {
        name: "science-daily",
        domain: "https://www.sciencedaily.com",
        url: "https://www.sciencedaily.com/search/?keyword=renewable#gsc.tab=0&amp;gsc.q=renewable&amp;gsc.page=1"
    },
    {
        name: "renewable-energy-magazine",
        domain: "https://www.renewableenergymagazine.com",
        url: "https://www.renewableenergymagazine.com/search?cx=partner-pub-7794467828055047%3A8692188386&amp;cof=FORID%3A9&amp;ie=UTF-8&amp;q=renewable"
    },
    {
        name: "world-energy-news",
        domain: "https://www.worldenergynews.com",
        url: "https://www.worldenergynews.com/news/search?search=renewable"
    }
];
</code>