Question

拥有 - HTML及其CSS -

HTML -

<html>
<head>
    <link href="css/breakLineInBrowser.css" rel="stylesheet">
</head>
<body>
    <p>
     Line 1. 
     Line 2.
     Line 3.
    </p>
</body>
</html>

CSS -

p {

}

DEMO

在浏览器中显示为 -

Line 1. Line 2. Line 3.

我将CSS属性添加到p {}中，以便将其显示为 -

Line 1. 
Line 2.
Line 3.

（我不会在HTML中找到</br>的解决方案

Answer 1

您可以使用css的white-space属性。

white-space: pre-line;

Answer 2

我认为你有三种选择。

使用<pre> HTML标记。

<p>
 <pre> 
  Line 1. 
  Line 2. 
  Line 3. 
 </pre> 
</p>

使用<br\> HTML标记

<p> 
 Line 1.<br/> 
 Line 2.<br/> 
 Line 3.<br/> 
</p>

或使用css样式

<p style="white-space: pre-line;">
line1
line2
line3
</p>

无论如何也请阅读其他答案。

Answer 3

为什么不使用该段落？

<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>

Answer 4

您搜索的是pre - 元素。这是css对应的

pre{ white-space: pre ; display: block; unicode-bidi: embed }

（见here）

如何使HTML中的每个分隔线在浏览器中显示为折线？

4 个答案: