在CSS中使用文本转换强制大写输入到标题大小写 [英] Force capitalised input to title case in CSS using text-transform

问题描述

我正在为CMS创建主题，并且只能更改与该页面关联的CSS（无Javascript，PHP等）。

是否有方法可以更改我们拥有的此用户列表：

JOHN SMITH
DAVID JONES
.. 。

使用CSS的

p> text-transform：lowercase; works ok（john smith，etc）but text-transform：capitalize;

$ b

根据要求，HTML为：

 < tr> [...]< td class =cell c1> ALEXANDER MULLER< / td> [...] 
< tr> [...]< td class =cell c1> JOHN SMITH< / td> [...] 
  

CSS是：

  td {
 text-transform：capitalize; 
} 
  

解决方案

text-transform：capitalize; 只修改每个单词的第一个字母，所以如果单词的第一个字母已经大写，text-transform将跳过该单词。

示例：

JoHN smith 将成为 JoHN Smith

除非所有的字都是小写字母，否则没有办法只使用CSS做标题外壳。

I'm creating a theme for a CMS, and only have the ability to change the CSS associated with the page (no Javascript, PHP, etc).

Is there a way to change this list of users that we have:

JOHN SMITH
DAVID JONES
...

into proper title case (John Smith, etc) using CSS?

text-transform: lowercase; works ok (john smith, etc) but text-transform: capitalize; does nothing (remains capitalised).

---

As requested, the HTML is:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

And the CSS is:

td {
    text-transform: capitalize;
}

解决方案

text-transform: capitalize; only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.

Example:

JoHN smith will become JoHN Smith

There is no way to do title-casing using only CSS unless all of your words are all lowercase.

这篇关于在CSS中使用文本转换强制大写输入到标题大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！