如何使用CSS將大寫文本轉換爲標題大小寫

如果您正在閱讀本文，您可能注意到CSS屬性text-transform:capitalize;未將此轉換爲此。相反，非初始字符仍保持大寫，所以在這種情況下轉換不起作用。那麼我們怎樣才能達到這個結果呢？如何使用CSS將大寫文本轉換爲標題大小寫

我見過這個經常問的問題，大多數答案都很快就可以用javascript來實現。這將起作用，但如果您正在編寫或自定義PHP CMS（如Wordpress，Drupal或Joomla）的模板/主題，則無需此操作。

來源

2012-12-10 emersonthis

壞消息是，沒有這樣的事情，text-transform : title-case這將保證結果爲冠軍。好消息是有一種方法可以做到這一點，它不需要javascript（正如通常爲這種情況所暗示的那樣）。如果您正在爲CMS編寫主題，則可以使用strtolower（）和ucwords()將相關文本轉換爲標題大小寫。

之前（這不起作用）：

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

AFTER：

<?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> 
?>

希望這可以幫助別人。快樂的編碼。

來源

2012-12-10 01:08:22 emersonthis

噓，['ucwords']（http://php.net/ucwords）。 – Charles

不錯。改變了它。 – emersonthis

'ucwords'本身還不夠，你還必須先將字符串轉換爲小寫字母。 'ucwords（strtolower（'ORIGINAL TEXT'））;' – tungd

-5

你只寫text-transform: none;

來源

2015-05-06 14:04:46

如果您的輸入文本是大寫的，那麼這將不起作用。 – disinfor

另外標題大小寫並不意味着沒有轉換。標題大小寫表示每個單詞的第一個字母大寫，低於其他字母。 OP正在尋找'capitalize'。 –

@EduardLuca這不是什麼標題案例的意思：http://www.grammar-monster.com/lessons/capital_letters_title_case.htm（我同意這個答案將不起作用） – Gus

-4

這可以用一個簡單的規則來實現：

text-transform: capitalize;

來源

2015-11-04 03:25:12

這不起作用。 – Restuta

請介紹您的用例場景。我發現這很容易工作。 –

@EmmanuelBuckshi在你建議的方法中，第二條規則將覆蓋第一條規則，而不是像你暗示的那樣建立在彼此之上。你說它適用於你 - 你能提出你的工作用例嗎？ –

在一定程度上，你可以使用僞類::第一個字母用CSS實現這一點，應該所有的工作回到IE 5.5的方法:-(

注意：這是非常依賴於你的html結構，並不會在所有情況下工作，但可以不時有用。結果如下

.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>

來源

2016-04-11 14:19:59 BMac

好主意，輝煌......工作像一個魅力 –

這可能會讓你適當的大寫的文本的第一句話，但沒有達到'標題案例'這將是'這是一些大寫的測試文本將工作'（是否大寫'一些'是一個品味/判斷'） – Gus

嗨@Gus你是正確的，這個答案會給你判例而不是標題案例，在原始問題中沒有提到哪個是首選的，因此爲什麼我在原始答案中增加了警告，這可能比JS解決方案的資源依賴性要小，但不適合所有用例。 – BMac

這裏是一個Joomla 1.5.22網站運行Virtuemart 1.工作的例子的目的是爲了拿一個字符串，它原本是大寫，並把它轉換成合適的大小寫。

大寫：

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

正確案例：

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

來源

2016-12-15 17:29:57

如何使用CSS將大寫文本轉換爲標題大小寫

回答

相關問題