HTML 中每个 <br /> 后缩进一行答案

【问题标题】：Indent line after each <br /> in HTMLHTML 中每个 <br /> 后缩进一行
【发布时间】：2012-07-22 02:49:17
【问题描述】：

我尝试将 PDF 书籍转换为移动书籍 (html)，并且我还想重新创建布局。在那里，每次中断后，文本都是一行。这应该是可行的

<body style="text-indent:20px each-line;">

但我做错了，因为它不起作用。

我不想对段落执行此操作，因为默认情况下它还包含一个空行，但这些中断并不总是意味着一个全新的段落...

【问题讨论】：

从语义上讲，段落有意义，而换行符没有。不要将方形钉子强行插入圆孔中。

标签： html text-indent

【解决方案1】：

each-line 尚不支持浏览器（请参阅text-indent on MDN）。然而，这是当它可用时你想要使用的。

【讨论】：

我来自2021年。仍然没有一个浏览器实现each-line。

【解决方案2】：

使用语义正确的段落标签<p>，并根据需要使用 CSS 修改填充/边距。

【讨论】：

【解决方案3】：

段落是标记级别的方式。您描述的空白行是 Web 浏览器默认添加的边距。由于您已经在编辑样式表以添加文本缩进，因此覆盖这些默认边距应该一点也不麻烦。事实上，以下内容就足够了：

p {
    margin: 0;
    text-indent: 2em
}

为什么是2em？这意味着段落设置字体的字母 m 的宽度的两倍。因此，无论读者如何使用他或她的个人设置（字体大小、分辨率等），缩进应该与文本成比例。这在某种程度上也是一种印刷约定。当然，您可以将此值设置为许多其他值，例如 20px 或 1cm。

【讨论】：

【解决方案4】：

当您运行代码 sn-p 时，它会为您提供示例 HTML 文本，您可以复制、粘贴和玩弄。

希望这会有所帮助。因为这是一种以您认为合适的方式放置文本的方法。谢谢！

    <!DOCTYPE html>
    <html>

    <body>

    <style>
    	h3 {
    		text-indent: 25px;
    	   }
    	
    	h3.small {
    			  line-height: 0.2;
    			  margin-top: 0em;
    			  margin-bottom: 0em
    			 }

    	h4.small {
    			  line-height: 0.2;
    			  margin-top: 1.5em;
    			  margin-bottom: 1em;
    		     }
    </style>
      
      <h1>Example</h1>
      
      <h3 class="small">Put text where you want</h3>
      
      <pre style="font-family:verdana">
    	    This text will keep spacing. 
    	        This this line too.</pre>
    	
      <h4 class="small", style="text-indent: 50px">
    	This is how to make the above example, hope it helps:
      </h4>
    	
    <pre>
    &lt;html&gt;

    &lt;body&gt;

      &lt;style&gt;
    	h3 {
    		text-indent: 25px;
    	   }
    	
    	h3.small {
    			  line-height: 0.2;
    			  margin-top: 0em;
    			  margin-bottom: 0em
    			 }

    	h4.small {
    			  line-height: 0.2;
    			  margin-top: 1.5em;
    			  margin-bottom: 1em;
    		     }
    	&lt;/style&gt;
      
      &lt;h1&gt; Example &lt;/h1&gt;
      
      &lt;h3&gt; class="small">Put text where you want &lt;h3&gt;
      
      &lt;pre&gt; style="font-family:verdana"
    	    This text will keep spacing as formated in HTML file. 
    	        This line too.&lt;/pre&gt;
      &lt;/body&gt;
    &lt;/html&gt;</pre>
    REFERENCE:
    W3schools.com link to HTML <pre> Tag:
    https://www.w3schools.com/tags/tag_pre.asp

    W3schools.com link to HTML line height:
    https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

    W3schools.com link to HTML <p> tag default options:
    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_p_default_css</pre>
    </body>
    </html>

【讨论】：