为什么我的 html 代码元素标签内的内容不自动换行？

Question

我有这个 HTML 包含代码的代码标签。有些代码很长，我希望它绕到下一行而不是超出元素块。但是它对我不起作用。下面是代码：

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>

我尝试在显示的块和内联块之间切换并设置宽度，但没有任何区别。

如何让文字换行？

Answer 1

您可以添加 white-space: pre-wrap; 来覆盖 code 标签的浏览器默认设置：

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>

为什么我的 html 代码元素标签内的内容不自动换行？

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

html

css

word-wrap