将每个句子的首字母大写

Question

我正在努力完成这项工作。在我的 HTML 标记中，我有几个句子的段落。它只是以大写字母开头的新段落。但我想要的是多个句子在同一段落中以大写的第一个单词开头。

有没有办法在没有js的情况下实现这一点？我尝试了以下混合：

@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

我想说把它应用到一个有段落的类中，并且那个段落中的每个句子也都是大写的。

谢谢

Answer 1

似乎是由于使用了 SCSS 语法，而您似乎在谈论 SASS（基于问题标签）。

在 SASS 中，mixin 会被定义为：

-sentence-case()
  text-transform: lowercase

  :first-letter
    text-transform: uppercase


.sentenceCase
  +sentence-case()

在 SCSS 中，mixin 会被定义为：

@mixin sentence-case() {
  text-transform: lowercase;

  &:first-letter {
    text-transform: uppercase;
  }
}

.sentenceCase {
  @include sentence-case();
}

在任何一种情况下，您都可以将 .sentenceCase 类分配给具有以下内容的元素：

<p class="sentenceCase"></div>

结果：

.sentenceCase {
  text-transform: lowercase;
}
.sentenceCase:first-letter {
  text-transform: uppercase;
}

<p class="sentenceCase">
our first sentance
</p>

<p class="sentenceCase">
our second first sentance
</p>

但是，对于每个句子中的每个第一个字母都应大写的附加要求，使用此 mixin 是不可行的。目前没有 CSS 选择器来选择句子中的每个首字母。