当前位置: 首页 > 知识库问答 >
问题:

超文本标记语言和CSS正确跟随段落中的新行

贺劲
2023-03-14

我想让我的段落正确地显示出来。

段落示例:

Lorem ipsum dolor坐在这里,奉献给我们。拍卖商,拍卖商,拍卖商。整数nec别名urna,一个微调猫。nunc mi quam,简历pharetra quis,dapibus等。二重奏等精英和大人物。莫尔比怀疑一个多洛坐在一起。nunc aliquam, eros molestie eeffitur faucibus, orci diam sollicitudin odio, ut拍卖人ipsum ipsum eu ligula。类适应社会责任,每conubia nostra,每inceptos himenaeos。

不要让老街上的车辆通行。波苏尔洛雷姆的万岁,我的权杖。我是阿利奎姆,索利西图丁,马克西姆·图皮斯。你是一个好朋友,我是一个好朋友。佩伦特斯克比本杜姆精英酒店。我是奥古斯·拉齐尼亚的显贵。Morbi elementum eleifend tellus sed mattis。不结盟运动在协商中,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>

在我遇到一个段落无法包含在div中的问题之前,它溢出了,所以我添加了break-word。现在我的另一个问题是,我不知道如何做到这一点,以遵循段落中段落之间的换行符。

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

Lorem ipsum dolor sit amet,是一位杰出的献身者。Donec拍卖行正在进行拍卖。整数nec aliquet urna,一只小猫咪。我的妻子,我的妻子,我的妻子,我的妻子等等。两人一组,一组,一组,一组,一组,一组。Morbi坐在amet egestas的座位上。努克·阿利夸姆、福西布斯的性爱分子效应、奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥特奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪奥迪。根据康努比亚·诺斯特拉(conubia nostra)和希梅纳奥斯(inceptos himenaeos)的规定,社会责任和责任等级为:。不要让老街上的车辆通行。波苏尔洛雷姆的万岁,我的权杖。我是阿利奎姆,索利西图丁,马克西姆·图皮斯。你是一个好朋友,我是一个好朋友。佩伦特斯克比本杜姆精英酒店。我是奥古斯·拉齐尼亚的显贵。Morbi elementum eleifend tellus sed mattis。不结盟运动在协商中,ac aliquam sem。

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

我该怎么解决这个问题?我不太擅长CSS,因为我更喜欢后端。

共有3个答案

牛华皓
2023-03-14

你必须贴上流行的标签

. 前任:

这是第一段

这是第二段

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

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.
陈铭晨
2023-03-14

要保持html文档的空白(新行、多行等),请尝试使用whitespace:pre-line 如下所示。此外,如果您希望保留行前面的选项卡空间,则应使用空白:预换行

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

姜晨
2023-03-14

正如哈利夫所说,空白:行前会有帮助,您可以添加

.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>

 类似资料:
  • 我打开这个链接"http://www.amazon.com/s?rh=n: 1"与urllib2和我试图获取下一页链接(href="/s/ref=lp_1_pg_2?rh=n: 283155, n:!1000, n: 1

  • 我的用例是我正在动态生成pdf。我也有一个单页的pdf。我想在现有的pdf页面之后/之前连接新生成的PDF。 我已经能够从超文本标记语言生成PDF(这可能导致2-3页)Pdf从超文本标记语言与CSS 我试图查找示例,其中之一是按页面方式连接现有的PDF使用现有的PDF-Concatenate

  • 因此,这又和我的另一个问题链接到同一个网站,这是另一个定位问题,可能很简单。我有一个容器div,我想在里面放两个div,一个占据容器的三分之一,在右边包含图片,一个包含文本,在左边。然而,由于某种原因,当告诉两个内部div向左浮动时,容器似乎消失了,而当使用inspect元素时,它处于一个我无法解释的奇怪位置。 HTML: CSS: Jscript/jQuery文件只是淡入淡出,但对定位没有影响

  • 我正在工作的工具提示和从后端我将获得数据与html标记。我需要在工具提示中显示相应的标签中的相应数据。例如,我将从后端获得Hello用户单击此处。我必须显示为你好用户在h1格式,点击这里应该是一个锚。我尝试了这两个功能,并取代其不工作。 具有以下功能: 替换: https://codesandbox.io/s/serene-fast-u8fie?file=/App.svelte

  • 我试图在HTML的pre标签中包装文本,但它不起作用。我使用下面的CSS作为我的标签。 我从如何在pre标记中换行文本? 我已添加

  • 我有一个docx文件,带有Calibri Light的Heading1样式(每隔一个文本也使用Calibri Light)。转换为html后,每个文本都是Calibri Light(正确),但当我打开html文件时,Heading1样式的文本是Times New Roman。(原因:html文件内部没有为Heading1样式设置字体系列) 当我打开docx文件并检查Heading1样式的字体时,它