多行缩进HTML标记 [英] Indenting HTML tags on multiple lines

问题描述

我找不到有关如何在多行上缩进HTML标记的指南，而我当前使用的解决方案并不能真正让我满意。

I can't find a guideline on how to indent HTML tags on multiple line, and the solution I am currently using doesn't really satisfy me.

想象我们有一个非常长的 div 声明，例如：

Imagine we have an extremely long div declaration, such as:

<div data-something data-something-else data-is-html="true" class="html-class another-html-class yet-another-html-class a-class-that-makes-this-declaration-extremely-long" id="just-a-regular-id">

为避免水平滚动当我发现这些巨大的线条时，通常会以以下方式缩进它们：

In order to avoid scrolling horizontally when I find these huge lines, I usually indent them in the following way:

<div 
    data-something 
    data-something-else 
    data-is-html="true" 
    class="html-class another-html-class yet-another-html-class a-class-that-makes-
    this-declaration-extremely-long" 
    id="just-a-regular-id"
>
    <p>Some element inside the DIV</p>
</div>

在可读性方面，我认为效果很好，但我对此有些担忧。

Which I think works pretty well in terms of readability, but I have some concern.

• 这样认为是一种好习惯吗？


• 您会发现更容易读懂的结局> 是否在打开的HTML Tag中与最后一个元素内联，或者像我在上面的示例中那样在新行中插入新行？


• 您有没有其他处理极长HTML声明的首选方法是？

• Is this way considered a good practice?
• Would you find more readable to leave the closing > in the opening HTML Tag inline with the last element, or on a new line as I did in the example above?
• Do you have any other preferred way to deal with extremely long HTML declaration?

如果您知道一些有关HTML样式准则的好资源，可以随意分享涵盖这种特殊情况，因为我没有在网上找到任何特定的东西。

Feel free to share if you know some good resource about style guidelines for HTML that cover this special case, because I didn't find anything specific online.

推荐答案

Google HTML / CSS样式指南建议在明显提高可读性时将长行换行，并提供了三种技巧，每种技巧都包括结尾处的> 和最后一行属性es：

The Google HTML/CSS Style Guide suggests wrapping long lines when it significantly improves readability, and offers three techniques, each of which include the closing > with the last line of attributes:

1. 将长行折成可接受长度的多行：

<div class="my-class" id="my-id" data-a="my value for data attribute a"
    data-b="my value for data attribute b" data-c="my value for data attribute c">
    The content of my div.
</div>

1. 通过将每个属性放在其上来中断长行自己的缩进行：

<div
    class="my-class"
    id="my-id"
    data-a="my value for data attribute a"
    data-b="my value for data attribute b"
    data-c="my value for data attribute c">
    The content of my div.
</div>

1. 类似于＃2，除了第一个属性是在第一行上，随后的属性缩进以匹配第一个属性：

<element-with-long-name class="my-class"
                        id="my-id"
                        data-a="my value for data attribute a"
                        data-b="my value for data attribute b"
                        data-c="my value for data attribute c">
</element-with-long-name>

我认为，当元素包含内容时，＃3不会提高可读性。

In my opinion, #3 would not improve readability when the element contains content.

这篇关于多行缩进HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！