text-transform capitalize css无法正常工作

Question

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

这是一个已知错误还是打算？

这是解决问题的codepen

Answer 1

更新

（并且正确答案 - 该行下方的内容仅作为参考，为Chromium论坛的讨论提供背景信息，因为this issue最初是作为浏览器错误发布的）。< / p>

虽然它可能看起来像一个bug，但实现是正确的。这是一个功能。简而言之，任何display:inline元素都是文档流程中的“letter”。如果您决定不在字母之间放置任何空格（或任何可能被解释为空格的空格），text-transform:capitalize应仅将“word”中的第一个字母大写。

要解决此问题，请提供您的链接display:inline-block或使用:before

添加伪（:after或display:inline-block;content:'';）

上一次更新：

<强> TL，DR;

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

...或者简单地用​为你的锚文本添加前缀似乎可以解决问题 但是，要明确它，上面是一个黑客。解决方法。

另一个解决方法是将nav a的显示属性设置为除inline之外的任何内容，这是默认设置 - 是的，display:none;也可以修复它。好！ツ...
...这导致了第三种选择，甚至更少侵入性而且不需要扮演难以获得的角色：

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

如果您需要nav a:after，也可以在:before上使用。解决这个问题的方法是打破线路的连续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>

这导致我尝试在每个锚的开头添加零宽度空间​，显然，修复了问题：

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>

Answer 2

使用uppercase代替capitalize

.myclass
{
   text-transform: uppercase;
}