logo标签列表

CSS 句首大写

htmlcss
19

有没有办法使“句子大小写”格式化？例如，“THIS IS SENTENCE 1. THIS IS SENTENCE 2. THIS IS SENTENCE 3.” 变为 -> “This is sentence 1. This is sentence 2. This is sentence 3.”

请正确格式化您的问题，以便我们能够理解您的期望。 - NewUser
2
请参考此链接：https://dev59.com/WG855IYBdhLWcg3weUMQ - rg88
这些句子是用户输入的吗？如果它们包含应该在句中大写的名称、缩写或其他单词，那怎么办？似乎任何盲目地将每个句子中除第一个字母外的所有内容都转换为小写的解决方案都会在某些情况下出现问题。 - Nathan Stretch
4个回答
37

你可以使用id/class:first-letter属性来实现这一点。

摘自上述重复的问题：

p {
    text-transform: lowercase;
}
p:first-letter {
    text-transform: uppercase;
}
5
如果您指的是::first-letter伪元素，它会针对一个_element_中的第一个字母。 - John Dvorak
1
我也尝试了 ::first-letter 但它不会将第二个句子的首字母大写。它变成了这样。** 这是第1个句子。这是第2个句子 ** 我想要的是 ** 这是第1个句子。这是第2个句子 **。 - Lian
1
好的，下一个可能的解决方案是使用另一个元素作为每个句子的第一个字符，以便更好地控制它，然后对其余内容使用“text-transform: lowercase”，因为我们真的不知道正在使用什么类型的元素。例如，如果它在列表项中，则可以将“first-letter”伪元素应用于每个“li”元素。 - iamshahid
1
@新手，你需要将每个句子都包装在单独的元素中。我建议使用 span。 - John Dvorak
这里的警告是它必须用于块级元素。有关详细信息，请参见此帖子（https://dev59.com/imsz5IYBdhLWcg3w0rZC#7631782）。 - Cycododge
一般情况下应该避免这种做法，因为有些单词即使出现在句子开头也应该小写，例如“iOS”。 - emlai
14

只有三个CSS属性。

text-transform: capitalize;
text-transform: lowercase;
text-transform: uppercase;

没有一个会按照你的要求输出。你可以使用小写的text-transform，然后使用JavaScript来大写每个句子的第一个单词。

Fiddle

1
Javascript无法覆盖text-transform，因此您需要使用text-transform:none。 - John Dvorak
1
当您应用Javascript时，文本将保持CSS转换的状态。您需要在应用Javascript后禁用转换。此外，Javascript看不到该转换的效果。 - John Dvorak
@JanDvorak http://jsfiddle.net/cTXzg/1/ 看看这个，我怎样才能在字符串中删除任何字符前的所有空格？因为innerHTML也包括第一句话的3个空格。因此，无法将第一个字母大写。可以通过正则表达式很容易地完成。但我不擅长它。 - Muhammad Talha Akbar
不是全部。只有前导空格和尾随空格。 - John Dvorak
是啊？真的吗，谢谢你，但我觉得下面有人的代码比我更好 :D - Muhammad Talha Akbar
显示剩余5条评论
13

CSS可以转换每个单词的首字母，但不能转换每个句子的首字母。可能您需要在此处使用Javascript：

<html>
  <head>
    <script language="javascript">
<!--
function fixCapitalsText (text)
{
  result = "";

  sentenceStart = true;
  for (i = 0; i < text.length; i++)
  {
    ch = text.charAt (i);

    if (sentenceStart && ch.match (/^\S$/))
    {
      ch = ch.toUpperCase ();
      sentenceStart = false;
    }
    else
    {
      ch = ch.toLowerCase ();
    }

    if (ch.match (/^[.!?]$/))
    {
      sentenceStart = true;
    }

    result += ch;
  }

  return result;
}

function fixCapitalsNode (node)
{
  if (node.nodeType == 3 || node.nodeType == 4) // Text or CDATA
  {
    node.textContent = fixCapitalsText (node.textContent);
  }

  if (node.nodeType == 1)
    for (i = 0; i < node.childNodes.length; i++)
      fixCapitalsNode (node.childNodes.item (i));
}
// -->
    </script>
  </head>
  <body onload="fixCapitalsNode (document.body);">
    THIS IS FIRST SENTENCE.
    THIS IS SECOND SENTENCE.
    This Is Third Sentence.
  </body>
<html>
1
嘿，应该是 var result = "" 而不是 result = ""。好的，+1。 - Muhammad Talha Akbar
这很酷，对我来说运行得很好！谢谢。但是你的代码非常长，我们能把它缩短吗？ - Lian
我可以翻译吗？谢谢 @Aspiring Aqib - Lian
1
@新手，这是它：http://jsfiddle.net/cTXzg/2/ 哈哈哈哈 :P - Muhammad Talha Akbar
1
@新手 嘿，抱歉啊，我没有收到这条评论的通知。所以没能及时回复你。但是你仍然可以使用这个链接：http://jsfiddle.net/cTXzg/3/ - Muhammad Talha Akbar
显示剩余4条评论
-5
你可以使用 CSS 的 text-transform:capitalize; 属性。
1
返回将所有首字母大写的文本： - Jon P
1
capitalize将所有单词首字母大写 - John Dvorak
1
text-transform: capitalize; 会让每个单词都变成大写字母。但是我想要的是每一个句子的第一个字母变成大写字母，就像我的例子一样。 - Lian
3
另外，仅将每个单词的第一个字母大写，而不是后面的字母。因此，如果单词中的其他字母已经以大写字母开头，则它们将保持大写。 - Nathan Stretch
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接