Использовать первую букву предложений CSS

Я хочу использовать первую букву предложений, а также первую букву после запятой, если это возможно. Я хочу добавить здесь код:

.qcont {
    width: 550px;
    height: auto;
    float: right;
    overflow: hidden;
    position: relative;
}

Ответ 1

Вы можете загладить первую букву элемента .qcont с помощью псевдоэлемента :first-letter.

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

Это самое близкое, что вы собираетесь использовать только css. Вы можете использовать javascript (в сочетании с jQuery), чтобы обернуть каждую букву, которая приходит после периода (или запятая, как вы пожелаете) в span. Вы можете добавить те же css, что и выше, к span. Или сделайте это в javascript все вместе.

Здесь приведен фрагмент для подхода css:

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

<p class="qcont">word, another word</p>

Ответ 2

Это невозможно сделать в CSS. Свойство text-transform не делает различий в соответствии с размещением слова внутри содержимого, и нет псевдоэлемента для выбора первого слова предложения. Для каждого предложения вам понадобятся реальные элементы в разметке. Но если вы можете это сделать, тогда вы, вероятно, могли бы также изменить начальные буквы на верхний регистр в самом содержании.

Капитализация в начале предложения является вопросом орфографии и должна выполняться при создании контента, а не с необязательными стилистическими предложениями (CSS) или с клиентскими скриптами. Процесс распознавания границ предложения далек от тривиального и вообще не может выполняться автоматически без сложного синтаксического и семантического анализа (например, аббревиатура, заканчивающаяся периодом, может появляться внутри предложения или в конце предложения).

Ответ 3

text-transform:capitalize; ~~будет использовать первую букву предложения~~, но если вы хотите также сделать это для запятых, вам придется написать некоторый javascript. Я согласен с @BoltClock. Почему вы хотели бы использовать запятую после запятой?

Изменить: Для читателей: text-transform:capitalize; будет использовать каждое слово предложения, а не только первое. Вы должны использовать селектор CSS :first-letter с указанным выше.