【问题标题】:How to convert UPPERCASE text to Title Case using CSS如何使用 CSS 将大写文本转换为标题大小写
【发布时间】:2012-11-27 10:28:24
【问题描述】:

如果您正在阅读本文,您可能注意到 CSS 属性 text-transform:capitalize; 不会将 THIS 转换为 This。相反,非初始字符保持大写,因此在这种情况下转换无效。那么我们怎样才能达到这个结果呢?

我经常看到这个问题,并且大多数答案都可以快速推广使用 javascript 来完成此任务。这将起作用,但如果您正在为 Wordpress、Drupal 或 Joomla 等 PHP CMS 编写或自定义模板/主题,则没有必要。

【问题讨论】:

    标签: php css


    【解决方案1】:

    坏消息是没有 text-transform : title-case 这样的东西可以保证结果是标题大小写的。好消息是有一种方法可以做到这一点,它不需要 javascript(通常针对这种情况提出建议)。如果您正在为 CMS 编写主题,您可以使用 strtolower() 和 ucwords() 将相关文本转换为标题大小写。

    之前(这不起作用):

    <style>
    .title-case{ text-transform:capitalize; }
    </style>
    <span class="title-case">ORIGINAL TEXT</span>
    

    之后:

    <?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>
    

    如果您正在编写主题,您可能会使用变量而不是文本字符串,但函数和概念的工作方式相同。下面是一个使用原生 Wordpress 函数 get_the_title() 将页面标题作为变量返回的示例:

    <?php
    $title = get_the_title();
    $title = strtolower($title);
    $title = ucwords($title); 
    <h1>
    <?php echo $title;
    </h1> 
    ?>
    

    希望这对某人有所帮助。编码愉快。

    【讨论】:

    • ucwords 本身是不够的,您还必须先将字符串转为小写。 ucwords(strtolower('ORIGINAL TEXT'));
    【解决方案2】:

    你就写text-transform: none;

    【讨论】:

    • 如果您的输入文本是大写的,那将不起作用。
    • 另外,标题大小写并不意味着没有转换。标题大小写表示每个单词的第一个字母大写,其余小写。 OP 正在寻找capitalize
    • @EduardLuca 这也不是标题的意思:grammar-monster.com/lessons/capital_letters_title_case.htm(我同意这个答案不起作用)
    • @Gus 是的,在 CSS 中没有办法做到这一点,所以我说的是最接近可能的。
    【解决方案3】:

    这可以通过一个简单的规则来实现:

    text-transform: capitalize;
    

    【讨论】:

    • 请展示您的用例场景。我发现这很容易工作。
    • @EmmanuelBuckshi 在您建议的方法中,第二条规则将覆盖第一条规则,而不是像您暗示的那样相互建立。你说它适合你——你能介绍一下你的工作用例吗?
    • 你是对的 -> 第一条规则是不必要的。然而,总的来说,第二条规则(本身)应该导致 OP 想要的结果(它“有效”)。
    • 无论如何,我的答案是唯一一个不使用php就能真正解决问题的答案。接受的答案是错误的,因为它声明“标题大小写”没有 css 规则;绝对有,我的回答清楚地表明了这一点。
    • 这只会将每个单词的第一个字母转换为大写,如果它的小写,它不会将大写转换为后续字母的小写。因此,其他答案中的要求首先转换为小写
    【解决方案4】:

    在某种程度上,您可以通过 CSS 使用伪类 ::first-letter 来实现这一点,并且应该可以一直使用到 IE 5.5 :-(

    注意:这非常依赖于您的 html 结构,并非在所有情况下都有效,但有时会很有用。点击“run code sn -p”可以看到下面的结果。

    .progTitle {
        text-transform: lowercase;
    }
    
    .progTitle::first-letter {
        text-transform: uppercase;
    }
    <p class="progTitle">THIS IS SOME TEST TEXT IN UPPERCASE THAT WILL WORK. </p>
    <p class="progTitle">this is some test text in lowercase that will work. </p>
    <p class="progTitle"><i class="fa fa-bars"></i> THIS WILL NOT WORK </p>

    【讨论】:

    • 这可能会让你对文本的第一句进行正确的大写,但不能实现“标题大小写”,即“这是一些可以使用的大写测试文本”(无论是否大写“一些”是品味/判断的问题)
    • 嗨@Gus 你是对的,这个答案会给你句子大小写而不是标题大小写。原始问题中没有提及首选哪个,因此我在原始答案中添加了警告。这可能比 JS 解决方案更少依赖资源,但并不适合所有用例。
    【解决方案5】:

    这是一个运行 Virtuemart 1 的 Joomla 1.5.22 网站中的工作示例。目的是获取一个原本为大写的字符串,并将其转换为正确的大小写。

    大写:

    <?php echo $list[$i]->name; ?>
    

    正确的案例:

    <?php echo ucwords( strtolower($list[$i]->name) ); ?>
    

    【讨论】:

    • 不是 CSS 解决方案...这个问题是关于 CSS 的。
    猜你喜欢
    • 1970-01-01
    • 2022-05-24
    • 1970-01-01
    • 1970-01-01
    • 2011-07-21
    • 1970-01-01
    • 2021-10-15
    • 2014-11-07
    • 1970-01-01
    相关资源
    最近更新 更多