2012-06-20 5 views
36

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

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

Вы не можете сделать это с помощью чистого CSS. (И почему вы хотите загладить первую букву после * запятой *?) – BoltClock

ответ

105

Вы можете использовать первую букву элемента .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>

+15

Имейте в виду, что '.qcont' должен быть блоком. Поэтому, если вы хотите загладить первое слово встроенного элемента (например, 'span'), вам нужно сделать его как минимум встроенным блоком. – Norris

-1

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

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

+2

İ thought text-transform: capitalize - это заглавное слово для каждого слова в предложениях. Не первое слово предложений. Я ошибаюсь? – 1907

+1

@ 1907, вы правы, 'text-transform: capitalize' капитализирует каждое слово. –

+2

мой плохой.У luud jacobs было это - ему нужно ': first-letter' с ним –

5

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

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

+0

Неверно, принятый ответ показывает, как это можно достичь. –

0

Если вам нужно заглавной первую букву в contenteditable контейнере вы не можете использовать свойство CSS

#myContentEditableDiv:first-letter { 
    text-transform: capitalize; 
} 

, потому что когда вы пытаетесь удалить письмо автоматически, вы удалите весь текст, содержащийся в contenteditable.

Попробуйте вместо этого пример, предоставленный sakhunzai, в https://stackoverflow.com/a/7242079/6411398 для рабочего решения.

Смежные вопросы