Сделать первый символ в верхнем регистре в css
есть способ сделать первый символ в верхнем регистре в метке в css.
структура html
<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
Ответы
Ответ 1
Есть свойство для этого:
a.m_title {
text-transform: capitalize;
}
Если ваши ссылки могут содержать несколько слов и вы хотите, чтобы первая буква первого слова была заглавной, вместо этого используйте :first-letter
с другим преобразованием (хотя это не имеет большого значения). Обратите внимание, что для работы :first-letter
ваши элементы a
должны быть блочными контейнерами (это могут быть display: block
, display: inline-block
или любая из множества других комбинаций одного или нескольких свойств):
a.m_title {
display: block;
}
a.m_title:first-letter {
text-transform: uppercase;
}
Ответ 2
Обратите внимание, что селектор ::first-letter
не работает с встроенными элементами, поэтому он должен быть либо block
, либо inline-block
, как показано ниже:
.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Ответ 3
CSS: селектор с первыми буквами
или:
text-transform: capitalize;
Ответ 4
Я предлагаю использовать
#selector {
text-transform: capitalize;
}
или
#selector::first-letter {
text-transform: uppercase;
}
Кстати, проверьте эту ссылку w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp
Ответ 5
<script type="text/javascript">
$(document).ready(function() {
var asdf = $('.capsf').text();
$('.capsf').text(asdf.toLowerCase());
});
</script>
<div style="text-transform: capitalize;" class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>
Ответ 6
Сначала сделайте его строчным:
.m_title {text-transform: lowercase}
Затем введите заглавную букву первой буквы:
.m_title:first-letter {text-transform: uppercase}
К слову, работает text-transform: capitalize; но вы хотите несколько слов, это решение идеально.
Ответ 7
Я бы порекомендовал вам использовать следующий код в CSS:
text-transform:uppercase;
Убедитесь, что вы положили его в свой класс.