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

Ответ 1

В CSS нет опции кепки предложений. Другие ответы, предлагающие text-transform: capitalize, неверны, поскольку этот параметр заглаживает каждое слово.

Здесь грубый способ выполнить это, если вы хотите, чтобы первая буква каждого элемента была в верхнем регистре, но это определенно нигде рядом с фактическими шапки предложения:

p {
    text-transform: lowercase;
}

p:first-letter {
    text-transform: uppercase;
}

<p>THIS IS AN EXAMPLE SENTENCE.</p>
<p>THIS IS ANOTHER EXAMPLE SENTENCE.
   AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.</p>

Ответ 2

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

CSS предлагает text-transform для капитализации, но поддерживает только capitalize, uppercase и lowercase. Ни один из них не сделает то, что вы хотите. Вы можете использовать селектор :first-letter, который будет применять любой стиль к первой букве элемента, но не к последующим.

p {
    text-transform: lowercase;
}
p:first-letter {
    text-transform: capitalize;
}

<p>SAMPLE TEXT. SOME SENTENCE. SOMETHING ELSE</p>
<!-- will become this:
Sample text. some sentence. something else. -->

Это не то, что вы хотите (и: первое письмо не совместимо с кросс-браузером... IE снова).
Единственный способ сделать то, что вы хотите, - это своего рода язык программирования (serveride или clientide), такой как Javascript или PHP. В PHP у вас есть функция ucwords (описанная здесь), которая так же, как CSS, набирает каждую букву каждого слова, но делает некоторую магию программирования (ознакомьтесь с комментариями документации для ссылок), вы сможете получить капитализацию каждой первой буквы каждого предложения.

Более простое решение, и вы, возможно, не захотите делать PHP, использует Javascript. Посмотрите следующую страницу - Capital Letters - для полномасштабного Javascript-примера , выполняющего именно то, что вы хотите. Javascript довольно короткий и делает капитализацию с помощью некоторых манипуляций с строками - у вас не будет проблем с настройкой capitalize-sentences.js для ваших нужд.

В любом случае: Капитализация обычно должна выполняться в самом содержимом не через Javascript или языки разметки. Подумайте о том, чтобы очистить свой контент (ваши тексты) другими способами. Например, Microsoft Word имеет встроенные функции для выполнения только того, что вы хотите.

Ответ 3

преобразовать элемент textContent в нижний регистр с помощью JS..

el.textContent = el.textContent.toLowerCase();

то просто используйте css..

text-transform: capitalize;

Ответ 4

Если вы хотите использовать для <input>, это не сработает, для <input> или текстовой области вам нужно использовать Javascript

<script language="javascript" type="text/javascript">
function capitaliseName()
{
    var str = document.getElementById("name").value;
    document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1);

}
</script>

<textarea name="NAME" id="name" onkeydown = "capitaliseName()"></textarea>

который должен хорошо работать для <input> или <textarea>

Ответ 5

Если вы можете сделать все символы строчными буквами на сервере, чем вы можете применить:

text-transform: capitalize

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

Ответ 6

Просто используйте

использовать код css: text-transform: uppercase;

Ответ 7

Я знаю, что OP просит использовать только CSS-решение. Но в случае, если кто-либо приземлится здесь из Magic Google, для чего требуется решение для JavaScript, вот однострочный:

capitalize = str => str[0].toUpperCase() + str.substr(1);

например:.

capitalize('foo bar baz'); // -> 'Foo bar baz'

Ответ 8

Использовать mixins

@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

// USAGE:
.title {
  @include sentence-case();
}

Ответ 9

Вы не можете делать это исключительно с помощью CSS. Существует атрибут text-transform, но он принимает только none, capitalize, uppercase, lowercase и inherit.

Возможно, вы захотите посмотреть на решение JS или на серверное решение.

Ответ 10

Если это используется в заглавном тексте,

p text-transform: lowercase;

Затем покажите текст, это строчный, но если вы скопируете этот текст с нижним окошком и вставьте его, он изменится на первоначальный заглавный.

Ответ 11

может просто использовать стиль внутри элемента

<p style="text-transform: uppercase;">Hi Im new here</p>

Ответ 12

Простой:

text-transform: capitalize;