哪个CSS属性（如果有）决定段落中每个*句子*之间的间距？

Question

由于CSS / HTML不在乎双精度空格，因此此HTML代码：

<p>This is a sentence.  This is another sentence.</p>

...在视觉上呈现为：

This is a sentence. This is another sentence.

它“吃掉”任何其他空格。 （除非您使用特殊的格式设置规则，否则它将所有内容转换为严格的“纯文本”并破坏了CSS / HTML的含义。）

由于这个原因，我假设必须有一些CSS属性来告诉浏览器段落中每个句子之间要放置多少空间（而不是每个单词，每个字母之间或仅在文本的开头）段落），类似：

p
{
    space-between-sentences: 2em;
}

如果该属性存在，那么在使用CSS的所有这些年中我从未遇到过。如果不存在，则是手动添加的唯一解决方法

  

到处强迫两个空格？因为这对我来说真的很丑/骇人听闻/不正确...

Answer 1

据我所知，CSS中没有这样的属性。

[最好使用标记来解决此问题，例如其中一项注释中所描述的内容，该注释涉及将句子包装在具有特定类的<span>标签中，您可以在其中添加边距，或利用 实体。

Answer 2

有许多方法可以实现您在此描述的内容，但我想您不是在寻找实现，而是在某些完全适合的CSS中寻找。

据我所知，有一个名为line-height的css，它描述了线条的高度。对于元素p，默认值为1em和一些边距。例如：

.container {
    width: 600px;
    margin: 0 auto;
  }
  p {
    line-height: 1.5em;
    font-size: 16px;
    margin: 0;
  }
</style>
<div class="container">
  <p>This is the first paragraph</p>
  <p>Another paragraph</p>
  <p>More paragraphs</p>
</div>

上面的代码显示了一个段落，其字体为16px，行距为1.5。希望这就是你想要的：）

Answer 3

分解两段。您可能想使用带有类语句的两段HTML容器

句子和段落标签实际上是相同的东西。段落标记仅指示文本将出现在屏幕上。您可能希望将句子放在Div内以包含您的句子，以便它们可以并排结束。

<div class="row">
     <p class = "column"> This is a sentence</p>
     <p class = "column"> this is another sentance</p>
</div>

1. 有许多种方法来设置CSS文档，以使句子并排。在CSS中，我们正在对这些段落进行样式设置。如果要创建列，我建议您签出W3 Schools CSS two colummns

   。row {向左飘浮;宽度：50％;}.column {向左飘浮;宽度：50％;填充：10px;高度：300像素； / *应该删除。仅用于演示* /}.row：之后{内容：“”；显示：表；清楚的}

2. 设置句子的另一种方法是使用Flexbox。

   。row {显示：flex;}

   。column {柔韧性：50％;}

3. 如果您不希望文档中有列，而只希望句子之间有空格，则可以使用内联样式，但我强烈不建议使用此功能，它在移动视图中看起来不太好。并不是说我使用了跨度标签<span>而不是段落标签<p>，但我只是相信使用跨度可以使代码更清晰。

   span.a {
      display: inline; /* the default for span */
      width: 100px;
      height: 100px;
      margin: 30px;
      border: 1px solid blue;
      background-color: yellow;
    }

    span.b {
      display: inline-block;
      width: 200px;
      margin: 20px;
      border: 1px solid blue;
      background-color: yellow;
    }

    <div>
         <span class = "a"> This is a sentence</span>
         <span class = "b"> this is another sentance</span>
    </div>