如何在CSS或PHP中实现全大写单词的正确首字母大写效果

解决方案 #

text-transform: capitalize和PHP原生ucwords()的默认逻辑都是仅将单词首字母转为大写，不会修改其余字符的大小写，所以遇到全大写的原标题就会失效。你可以通过先统一转小写再处理首字母大写的逻辑解决这个问题，分为后端和前端两种实现方案：

方案1：PHP后端处理（推荐，兼容性、复用性更好） #

1.1 模板直接处理

如果只是单处使用，直接修改模板输出逻辑即可：

<h4>
    <a href="{{ route('posts.show', $post )}}">{{ ucwords(strtolower($post->title)) }}</a>
</h4>

如果需要支持多语言、带撇号/连字符的特殊场景（比如o'connor转为O'Connor），可以改用对多字节支持更好的mb_convert_case：

<h4>
    <a href="{{ route('posts.show', $post )}}">{{ mb_convert_case(mb_strtolower($post->title), MB_CASE_TITLE, "UTF-8") }}</a>
</h4>

1.2 模型加访问器（复用性更高）

如果多处需要用到格式化后的标题，直接在Post模型中定义访问器，后续统一调用即可：

// app/Models/Post.php
public function getFormattedTitleAttribute()
{
    return mb_convert_case(mb_strtolower($this->attributes['title']), MB_CASE_TITLE, "UTF-8");
}

模板直接调用格式化后的属性：

<h4>
    <a href="{{ route('posts.show', $post )}}">{{ $post->formatted_title }}</a>
</h4>

方案2：CSS前端处理 #

如果不想修改后端代码，通过两层text-transform规则也可以实现：

<h4 style="text-transform: lowercase;">
    <a href="{{ route('posts.show', $post )}}" style="text-transform: capitalize;">{{ $post->title }}</a>
</h4>

或者合并为一行简写：

<h4 style="text-transform: lowercase capitalize;">
    <a href="{{ route('posts.show', $post )}}">{{ $post->title }}</a>
</h4>

该方案缺点是对特殊字符分隔的单词处理精度不如PHP，且用户禁用CSS时格式会失效。

内容的提问来源于stack exchange，提问作者Alphy Gacheru