多行字符串属性值，HTML

Question

是否可以在 HTML 中编写如下内容：

<a href="bla bla bla bla\
        bla bla bla bla">....</a>

这个想法是将字符串属性拆分为不同的行以提高可读性。

Answer 1

是的，这是可能的： https://stackoverflow.com/a/38874964/3135511 秘诀是使用 tab 而不是 space 以及使用换行符

<a href="
    bla 
    bla bla 
    bla bla bla 
    bla bla 
    bla
    ">....</a>

尝试该代码并将鼠标悬停在 .... 上 并寻找链接 - 它应该读起来就像 啦啦啦啦啦啦啦啦啦啦啦啦

背景：

• 字符串中的空格将转义为 %20 并保留在其中， 但tab和换行符等空白将被丢弃/过滤掉。

  如果您希望它们在字符串中，请为 Tab 编写

  %09

  ，为某些 CR/LF 窗口换行符编写

  %0A%0D

  。 -> 它们是两个字节一 Carrier Return char 和一些 Line Feed char。

Answer 2

不，这是不可能的。 HTML 没有“行继续”字符。如果您在属性值中放置换行符，浏览器的行为会有所不同，但现代浏览器的行为方式与 HTML5 中记录的方式相同：允许换行符，并且按字面意思将换行符存储为 DOM 中的换行符。这意味着

href

属性值已损坏并且不起作用。

缓解长

href

值问题的最佳方法是将这样的值单独放在一行上，不带引号：

<a href=
http://www.example.com/some-long-path/and-so-on
>link</a>

相反，以下内容是允许的，并且会导致两行工具提示（在现代浏览器中）。要点是，一般语法允许换行，但它们会产生后果，并且属性的特定语法可能禁止换行。

<a href=foo title="Hello
world">bar</a>

Answer 3

您可以在没有任何中断字符的情况下完成此操作。就像这样：

<a href="http://stackoverflow.com
/questions/
22831988/
string-attribute-values-in-multiple-lines-html">
LINK
</a>

演示

Answer 4

只要行与行之间没有空格，您就可以使用@laaposto 建议。

如果你不想遵循这个规则，那么你需要使用javascript来删除空格：

var anchor = document.getElementsByTagName("a");

for(var i=0; i<= anchor.length; i++) {
    var href = anchor[i].href.replace(/%20/g,'');
    anchor[i].href = href;     
}

小提琴演示

或者使用 jQuery 更容易：

var href = $('a').attr('href').replace(/ /g,'');
$('a').attr('href', href);

小提琴演示

Answer 5

您可以用任何方式书写，但请确保行与行之间没有任何空格。

链接这个

<a href="http://stackoverflow
.com/quest
ions/228319
88/string-attribute-values-in-multiple-lines-html">

Answer 6

您可以使用 PHP 吗？如果是这样你可以这样做：

<a href="<?= "very "
             ."long "
             ."string" ?>">