css - 文本转换大写 css 无法正常工作

Question

在我的 React 元素中尝试使用“text-transform: capitalize”css 来设置导航元素的样式时，我注意到了一个非常奇怪的问题。似乎 React 只将样式应用于第一个 anchor 标记而忽略其余部分。但是，当值设置为“小写”或“大写”时，一切正常。

这是一个已知的错误还是有意为之？

这是codepen演示问题

Answer 1

更新
(和正确答案 - 线下的内容仅作为引用，为 Chromium 论坛上的讨论提供上下文，因为 this issue 最初是作为浏览器错误发布的)。
虽然它可能看起来像一个错误，但实现是正确的。这是一个特点。总之，任何display:inline element 是文档流中的一个“字母”。如果您决定不在字母之间放置任何空格(或任何可能被解释为空格的内容)，text-transform:capitalize应该只将“单词”中的第一个字母大写。
要修复它，请提供您的链接 display:inline-block或添加伪( :before 或 :after )和 display:inline-block;content:'';
以前的更新:
TL，博士；

nav a:before {
  content: '​'; /* copy-paste a zero-width-space (​) character */
}

...或者简单地在 anchor 文本前加上 ​似乎解决了这个问题。
但是，要清楚一点，以上是一个黑客。一种解决方法。
另一个修复是设置 nav a除了 inline 之外的任何东西的显示属性，这是默认值 — 是的， display:none;也修好了。为好!ツ...
...这导致了第三种选择，甚至更少侵入性并且不需要难以获得的字符:

nav a:before {
  content: ''; /* empty string, no specials here */
  display: inline-block;
}

如果在 nav a:after 上使用也有效, 如果您需要 :before s。修复它的是打破连续的 inline线的流动。

更新答案:
您似乎发现了一个错误，目前 Chrome 和 Firefox 中都存在该错误。我还没有测试过其他浏览器，但我期待在其他基于 webkit 的浏览器(Safari、Edge、Opera)中体验到这一点。我已将错误提交给 Chromium这很可能会在 Chrome 中修复它，并在一段时间后在 Firefox 中修复它。
正如您在添加 mcve 之前所怀疑的那样，它与 React 无关。我可以在这里使用简单的标记重现它:

nav a {
   margin: 1em;
   text-transform: capitalize;
}

<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>

最奇怪的是……如果你把每个元素放在不同的行上(在标记中)……它开始正常工作，没有任何其他变化。

nav a {
   margin: 1em;
   text-transform: capitalize;
}

<div><nav><a href="/">home</a>
<a href="/2">page 2</a>
<a href="/3">page 3</a></nav><div>

这让我尝试添加零宽度空间 ​在每个 anchor 的开头，显然也是 修复问题 :

nav a {
  margin: 1em;
  text-transform: capitalize;
}
nav a:before {
  content: '​';
}

<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>

要将修复应用到您的示例，请将这一行放在您的 <nav> 之前。 :

<style>nav a:before{'{'}content:'&#8203;'{'}'}</style>

但是，它仍然是 Chrome 中的一个长期错误，应该在他们的论坛上报告(并修复)。

初步答复 (在看例子之前)
React 是 JavaScript。

text-transform: capitalize;

...是CSS。如果 React 处理了它，文本在被放入标记之前就会被转换。整点 text-transform是在标记中保持文本不变并呈现(通过浏览器)转换。
所以你的问题并不是真正的错误，与 React 无关。这与您的浏览器没有实现 text-transform:capitalize 有关然而。或者没有正确应用它。
参见兼容性表 here和 here .不幸的是，很难确定(除了自己尝试)浏览器是否支持部分支持的属性的特定值。
在您的浏览器支持之前，您必须使用 React(或 vanilla)或您选择的库(即:lodash 有 _.capitalize())来大写您的文本。
这个简单的例子会告诉你你当前的浏览器是否支持它:

capitalize-meh {
  text-transform: capitalize;
}

<capitalize-meh>i should be capitalized...</capitalize-meh>

在没有 CSS 支持的浏览器中“修复”此问题的唯一方法 capitalize是定义你自己的函数:

capitalize(string) {
  return string.toLowerCase().replace(/(^|\s)\S/g, l => l.toUpperCase())
}

测试:

class TextExample extends React.Component {
  constructor(props) {
    super(props);
    this.text = props.text || '';
  }

  capitalize(string) {
    return string.toLowerCase().replace(/(^|\s)\S/g, l => l.toUpperCase())
  }

  render() {
    return (<text>{this.capitalize(this.text)}</text>);
  }
}
ReactDOM.render(
  new TextExample({text:'what eVaH...'}).render(),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>