将 HTML 属性值拆分为多行答案

【问题标题】：Break up HTML attribute values into multiple lines将 HTML 属性值拆分为多行
【发布时间】：2021-09-24 17:15:30
【问题描述】：

有没有办法格式化 HTML 属性值，使它们跨越多行？本质上，我问的是有没有办法在常规类型的 HTML 属性值中转义返回。

例如，在下面这个工作代码中，我们在一行中有href 属性值。

<head>
  <!-- Bootstrap CSS -->
  <link
    rel="stylesheet" 
    href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  > <!-- href value above spans 1 line and wraps normally with text editors width -->
</head>
<body>
  <h1>Bootstrap has successfully applied because this font is sans-serif</h1>
</body>

我怎样才能让这种格式的unworking代码具有跨越multiple行的属性值才能工作？：

<head>
  <!-- Bootstrap CSS -->
  <link
    rel="stylesheet" 
    href= "https://cdn.jsdelivr.net/npm/
           bootstrap@5.0.2/dist/css/
           bootstrap.min.css"
  > <!-- href value above spans 3 lines -->
</head>
<body>
  <h1>
    Bootstrap hasn't applied due to the amount of 
    <mark>enter</mark> characters used in the <mark>href</mark> attribute
  </h1>
</body>

似乎一旦你将返回值添加到一个值中，整个值就会失败。我尝试了常规的 javaScript 转义字符，但没有成功。

如何在 HTML 属性中成功添加返回(新行)价值观？

【问题讨论】：

我认为从规范的角度来看，您可以在 html 属性中添加新行，但它们无法被浏览器中的 link script 或其他标签识别
@ashishmaurya 所以这可以在不同的标签上工作吗？可能是 h1 标签上的类名？
是的，只是不要破坏你的类名（否则 CSS 将不起作用）
我不相信 HTML 属性有一个 line continue 构造。
即使它删除了换行符，我希望它用一个空格替换它，比如class='make-the- text-purple'（实际上，属性中还有空格，而不仅仅是换行符） .浏览器被告知有空格需要考虑，所以它会考虑，即使它对待其中的一些是特殊的。

标签： html syntax attributes escaping html-escape-characters

【解决方案1】：

我不相信 HTML 属性具有“属性” continue 构造，例如 Javascript 或命令行中的 line continue。

所以这真的行不通：

// This is just whitespace, so I assume the browser will encode it
href="https://cdn.jsdelivr.net/npm/
      bootstrap@5.0.2/dist/css/
      bootstrap.min.css"

// Javascript variety
href="https://cdn.jsdelivr.net/npm/" +
     "bootstrap@5.0.2/dist/css/" +
     "bootstrap.min.css"

// Command line variety
href="https://cdn.jsdelivr.net/npm/" \
     "bootstrap@5.0.2/dist/css/" \
     "bootstrap.min.css"

它只是属性中的空格，或者像上面示例中那样与属性无关的引用字符串。

这是我能想到的最好的：

<script>
let link = document.createElement('link')

link.rel = 'stylesheet'
link.href = 'https://cdn.jsdelivr.net/' +
            'npm/bootstrap@5.0.2/' +
            'dist/css/bootstrap.min.css'

document.head.append(link)
</script>

您也许可以做一些整理来查找和删除某些标签属性中不必要的空格。但是，如果重点是格式化浏览器的 View Source 标记以提高可读性，那将无法实现这一目的。

【讨论】：

是的，看起来 JavaScript 是这里唯一可能的途径。谢谢：jsfiddle.net/v653tuns

【解决方案2】：

能否请您分解一下您的问题！我很难理解，但是如果您询问格式化代码，我会使用代码编辑器并查看它们是否是格式化代码的功能。在 vs code 中，它们是格式化代码的功能。但我不确定你有没有！对不起，如果你没有得到你所说的，但很高兴提出问题。继续努力吧！！！ ?

【讨论】：

我不是在问文本编辑器如何格式化您的代码。我在问我是否可以使用转义字符等技术在属性值中使用enter 键。