Как сделать первую букву заглавной только с помощью CSS в каждом случае

Я хочу использовать только первую букву с заглавной буквы, а другие должны быть маленькими с помощью CSS

Строка:

SOMETHING BETTER 
sOMETHING bETTER
Something better

но результат должен быть

Something Better

Возможно ли это с помощью CSS? Чтобы сделать первую букву заглавной, я использую

text-transform: capitalize;

Но не в состоянии капитализировать в каждом случае. «Я хочу использовать CSS, потому что в моем приложении он везде жестко запрограммирован, но везде вызывается класс».


css word capitalization
person Kabir    schedule 03.07.2013    source источник
comment
Невозможно только с помощью CSS. Даже попытка каскадировать text-transform: lowercase в text-transform: capitalize не сработает. Если вы хотите использовать javascript, вот ссылка на ответ для этого: stackoverflow.com/questions/196972/   -  person kalley    schedule 03.07.2013
comment
В PHP — ucwords("UPPERCASE WORD HERE");, а результат: Uppercase Word Here" — php.net/manual/en /function.ucwords.php Вы не можете сделать это, используя только CSS, потому что вы не можете сделать lowercase, а затем capitalize.   -  person Nick R    schedule 03.07.2013
comment
возможный дубликат сделать первый символ в верхнем регистре в css   -  person yoeriboven    schedule 03.07.2013
comment
@yoeriboven: я не думаю, что это то же самое.   -  person BoltClock    schedule 03.07.2013

Ответы (5)


arrow_upward
37
arrow_downward

вы должны иметь возможность использовать псевдоэлемент :first-letter:

.fl {
 display: inline-block;
}

.fl:first-letter {
 text-transform:uppercase;
}

<p>
 <span class="fl">something</span> <span class="fl">better</span>
</p>

дает:

Что-то лучше

person mzmm56    schedule 03.07.2013
comment
Это правильно, но означает, что каждое слово должно быть заключено в span, что некрасиво. - person naththedeveloper; 03.07.2013
comment
Добавлена ​​магия javascript ^_^ @mzmm56 - person Naftali aka Neal; 03.07.2013

arrow_upward
7
arrow_downward

Это невозможно только с помощью CSS, но вы можете сделать это, например, с помощью Javascript или PHP.

В PHP

ucwords()

А в Javascript

function toTitleCase(str){
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

Извлечено из Преобразование строки в заглавный регистр с помощью JavaScript

person zurfyx    schedule 03.07.2013

arrow_upward
6
arrow_downward

Вы можете попробовать комбинацию этого ответа и некоторого javascript (с использованием jQuery)

HTML:

<div class='capitalize'>
    SOMETHING BETTER 
    SOMETHING BETTER 
    SOMETHING BETTER 
</div>

ЯВАСКРИПТ:

$('.capitalize').each(function(){
    var text = this.innerText;
    var words = text.split(" ");
    var spans = [];
    var _this = $(this);
    this.innerHTML = "";
    words.forEach(function(word, index){
        _this.append($('<span>', {text: word}));
    });
});

CSS:

.capitalize {
    text-transform: lowercase;
}

.capitalize span {
    display: inline-block;
    padding-right: 1em  
}

.capitalize span:first-letter {
    text-transform: uppercase !important;
}

Демонстрация: http://jsfiddle.net/maniator/ZHhqj/

person Naftali aka Neal    schedule 03.07.2013

arrow_upward
2
arrow_downward

Почему бы вам просто не использовать псевдоэлемент :first-letter в css?

h2:first-letter{
text-transform: uppercase;

}

h2{

*your general code for h2 goes here;*

}
person Abibi8    schedule 11.08.2015

arrow_upward
0
arrow_downward

Да, CSS здесь не поможет. Добро пожаловать в мир JavaScript, где возможно все.

window.onload = function(){
  var elements = document.getElementsByClassName("each-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}



  .first-letter {
    color: red;
  }



<p class="each-word">First letter of every word is now red!</p>
person Ravi Joon    schedule 01.12.2015