Вопрос:

CSS заглавная буква первая буква в заглавных буквах

html css

1320 просмотра

6 ответа

1638 Репутация автора

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

Так что поменять «ТЕСТИРОВАНИЕ» на «Тестирование»?

<span class = "capitalize">TESTING</span>

Свойство css text-transform: capitalize не работает (заглавная буква первая, но остальные игнорируются).

Автор: Tony Scialo Источник Размещён: 02.02.2017 10:43

Ответы (6)


0 плюса

77 Репутация автора

Вы можете попытаться идентифицировать это с Js.

Автор: Цунский Никита Размещён: 02.02.2017 10:46

10 плюса

6965 Репутация автора

Решение

Да, это возможно только с помощью CSS, вот как:

.capitalize {
  text-transform: lowercase;
  display: inline-block;
}

.capitalize:first-letter {
  text-transform: uppercase
}
<span class = "capitalize">TESTING</span>

Вы заметите, я добавил display:inline-block, это потому что:

Msgstr "Первая строка имеет значение только в блоке контейнер-блок, поэтому псевдоэлемент :: first-letter влияет только на элементы с отображаемым значением block, inline-block, table-cell, list-item или table -caption «. источник

Автор: Kevin Jantzer Размещён: 02.02.2017 10:50

0 плюса

1 Репутация автора

.capitalize::first-letter {
     text-transform: capitalize;
}

https://jsfiddle.net/5wbe2ugq/

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

.capitalize::first-letter {
     text-transform: capitalize;
}

.capitalize {
     text-transform: lowercase;
}
Автор: jdmdevdotnet Размещён: 02.02.2017 10:52

3 плюса

2498 Репутация автора

CSS:

<style>
    p.capitaliseFirstLetterOnly {
        text-transform: lowercase;
    }
    p.capitaliseFirstLetterOnly::first-letter{
        text-transform: uppercase;
    }
</style>

HTML:

<p class="capitaliseFirstLetterOnly">TESTING.</p>
Автор: Matthew Cawley Размещён: 02.02.2017 10:52

0 плюса

382 Репутация автора

 <style>
.capitalize{
  text-transform:lowercase;
  display: inline-block;
}
.capitalize::first-letter {
     text-transform:capitalize; 
}
</style>
<span class = "capitalize">TESTING</span>

Обязательно добавьте display: inline-block, потому что span элемента не работает с: first-letter в отличие от p, div, таблиц и т. Д. Если вы используете элемент, который имеет блок по умолчанию, тогда вам не нужно поставить дисплей: встроенный блок, как показано ниже.

 <style>
.capitalize{
  text-transform:lowercase; 
}
.capitalize::first-letter {
     text-transform:capitalize; 
}
</style>
<div class = "capitalize">TESTING</div>

Ура,

Автор: smzapp Размещён: 02.02.2017 11:11

1 плюс

0 Репутация автора

Вы можете использовать jquery следующим образом:

<span class="capitalize">MYTEXT</span>
    <script>
        $(document).ready(function () {
            var txt = $(".capitalize").text().toLowerCase();
            txt = txt.toLowerCase().replace(/\b[a-z]/g, function (letter) {
                return letter.toUpperCase();
            });
            $(".capitalize").text(txt); 
        });        
    </script>

Ссылка:

Прописная первая буква переменной

Автор: user5563959 Размещён: 02.02.2017 11:12
Вопросы из категории :
32x32