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&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&gsc.q=renewable&gsc.page=1"
},
{
name: "renewable-energy-magazine",
domain: "https://www.renewableenergymagazine.com",
url: "https://www.renewableenergymagazine.com/search?cx=partner-pub-7794467828055047:8692188386&cof=FORID:9&ie=UTF-8&q=renewable"
},
{
name: "world-energy-news",
domain: "https://www.worldenergynews.com",
url: "https://www.worldenergynews.com/news/search?search=renewable"
}
];
</code>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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?
CodePudding user response:
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&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&gsc.q=renewable&gsc.page=1"
},
{
name: "renewable-energy-magazine",
domain: "https://www.renewableenergymagazine.com",
url: "https://www.renewableenergymagazine.com/search?cx=partner-pub-7794467828055047:8692188386&cof=FORID:9&ie=UTF-8&q=renewable"
},
{
name: "world-energy-news",
domain: "https://www.worldenergynews.com",
url: "https://www.worldenergynews.com/news/search?search=renewable"
}
];
</code>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>