HTML和CSS正确地遵循段落中的新行
[英]HTML and CSS to follow new lines in paragraph properly
问题描述
I want to make it so that my paragraph will be displayed properly. 
我想这样做，以便我的段落能够正确显示。
Paragraph example: 段落示例：
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vehicula laoreet cursus.
My code: 我的代码：
<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>
Before I encountered a problem where the paragraph cannot be contained inside my div it overflows so I added break-word. 在我遇到一个问题之前，段落不能包含在我的div中，它会溢出，所以我添加了break-word。 Now my other problem is that I don't know how to make it so to follow the line breaks in between the paragraph that is present in the paragraph. 现在我的另一个问题是我不知道怎么做才能遵循段落中段落之间的换行符。
When it does display it removes the line-break and everything is presented like this: 当它显示时它会删除换行符，所有内容都显示如下：
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Notice that it now that the second paragraph is connected to the last text of the first paragraph. 请注意，现在第二段已连接到第一段的最后一个文本。
How can I solve this? 我怎么解决这个问题？ I'm not that good with CSS since I prefer backend. 我不喜欢CSS，因为我更喜欢后端。
3 个解决方案
解决方案1
3 2018-03-06 10:44:17
As say Halif, white-space:pre-line; 正如哈利夫所说， white-space:pre-line; will help, and you can add <br> to space between text block. 会有所帮助，你可以在文本块之间添加<br>到空格。 Or add <p> to each text block. 或者将<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>
解决方案2
2 已采纳 2018-03-06 10:35:23
To keep your html document white spaces (new line, multi line etc) as it is try to use white-space:pre-line; 保持你的html文档的空格（新行，多行等），因为它试图使用white-space:pre-line; like following. 喜欢以下 Also if you want to keep the tab space front of lines then you should use white-space:pre-wrap . 此外，如果您想要将标签空间保持在行的前面，那么您应该使用white-space:pre-wrap 。
.description { white-space:pre-line;}
解决方案3
-2 2018-04-07 13:44:31
You have to put the popular tag 你必须把流行的标签
. 。 Ex: 例如：
this is the first paragraph 这是第一段
this is a second paragraphe 这是第二个paragraphe
Notice!:if you went to have a big espace between the two paragraphes you can add a lot of tags. 注意！：如果你在两个paragraphes之间有一个很大的空间，你可以添加很多标签。
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.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.