HTML和CSS正确地跟踪段落中的新行

时间:2018-03-06 10:24:36

标签: html css

我想这样做,以便我的段落能够正确显示。

段落示例:

  

Lorem ipsum dolor坐下来,精神上的精神。 Donec auctor   est nec interdum tincidunt。整数nec aliquet urna,一个tincidunt   猫。 Nunc mi quam,convallis vitae pharetra quis,dapibus et est。   Duis et elit et turpis volutpat interdum ut et magna。 Morbi suscipit a   dolor坐在艾美斯。 Nunc aliquam,eros molestie efficitur   faucibus,orci diam sollicitudin odio,ut auctor ipsum ipsum eu   ligula。每个conubia的类别taciti sociosqu ad litora torquent   nostra,per inosos himenaeos。

     

Donec vehicula laoreet cursus。 Vivamus在posuere lorem,quis   scelerisque mi。 Quisque ut massa aliquam,sollicitudin sem ac,maximus   turpis。 Quisque eu ante volutpat,dapibus justo sit amet,sodales   NIBH。 Pellentesque bibendum elit id turpis accumsan,ac rutrum est   venenatis。 Fusce iaculis tortor ut sem interdum,id dignissim augue   lacinia。 Morbi elementum eleifend tellus sed mattis。 Nam in consequat   arcu,ac aliquam sem。

我的代码:



<div class="description pa10" style="word-wrap: break-word;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan, ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.</div>
&#13;
&#13;
&#13;

在我遇到一个问题之前,段落不能包含在我的div中,它会溢出,所以我添加了break-word。现在我的另一个问题是,我不知道该怎么做才能遵循段落中段落之间的换行符。

当它显示时会删除换行符,所有内容都显示如下:

  

Lorem ipsum dolor坐下来,精神上的精神。 Donec auctor   est nec interdum tincidunt。整数nec aliquet urna,一个tincidunt   猫。 Nunc mi quam,convallis vitae pharetra quis,dapibus et est。   Duis et elit et turpis volutpat interdum ut et magna。 Morbi suscipit a   dolor坐在艾美斯。 Nunc aliquam,eros molestie efficitur   faucibus,orci diam sollicitudin odio,ut auctor ipsum ipsum eu   ligula。每个conubia的类别taciti sociosqu ad litora torquent   nostra,per inosos himenaeos。 Donec vehicula laoreet cursus。 Vivamus   在posuere lorem,quis scelerisque mi。 Quisque ut massa aliquam,   sollicitudin sem ac,maximus turpis。 Quisque eu ante volutpat,dapibus   justo坐下来,sodales nibh。 Pellentesque bibendum elit id turpis   accumsan,ac rutrum est venenatis。 Fusce iaculis tortor ut sem   interdum,id dignissim augue lacinia。 Morbi elementum eleifend tellus   sed mattis。 Nam in consequat arcu,ac aliquam sem。

请注意,现在第二段已连接到第一段的最后一个文本。

我该如何解决这个问题?我不喜欢CSS,因为我更喜欢后端。

4 个答案:

答案 0 :(得分:3)

正如Halif所说,white-space:pre-line;会有所帮助,您可以在文本块之间的空格中添加<br>。或者为每个文本块添加<p>

.description { white-space:pre-line;}
<h3> First variant with br and  white-space </h3>
<div class="description pa10" style="word-wrap: break-word;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et<br>
  magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
  Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan,<br>
  ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.
</div>

<h3> Secont variant with p </h3>
<div style="word-wrap: break-word;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et</p>
  <p>magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan,</p>
  <p>ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.</p>
</div>

答案 1 :(得分:2)

要保持html文档的空格(新行,多行等),请尝试使用white-space:pre-line;,如下所示。此外,如果您希望将标签空间保持在行的前面,则应使用white-space:pre-wrap

.description { white-space:pre-line;}

答案 2 :(得分:-1)

你可以尝试

&#13;
&#13;
p{
  margin-bottom: 15px;
}
&#13;
&#13;
&#13;

&#13;
&#13;
p{
  margin: 15px auto;
 }
&#13;
&#13;
&#13;

答案 3 :(得分:-2)

你必须把流行的标签

。   例如:

这是第一段

     

这是第二个paragraphe

注意!:如果你在两个参数之间有一个很大的空间,你可以添加很多标签。

You have to put the popular tag <p>.
Example:
<body>
  <p>this is the first paragraph</p></br>
     <p>this is a second paragraphe</p>
</body>
    
Notice!:if you went to have a big espace between the two paragraphes you can add a lot of </br>tags.