Сейчас у меня есть абзац, и я бы хотел использовать всю первую строку. Я установил первый абзац в идентификатор "firstp" и попытался:
#firstp::first-line {
text-transform: uppercase;
}
Я пробовал его с помощью text-transform: capitalize, но это тоже не работает. Странно, потому что мне удалось изменить первую букву (изменить размер шрифта) с помощью #firstp:first-letter.
text-transform on :first-line действительно глючит прямо сейчас, см. ссылку здесь http://reference.sitepoint.com/css/text-transform
Вы можете использовать этот плагин jquery под названием linify https://github.com/octopi/Linify, чтобы выбрать первую строку, а затем применить свойство text-transform: uppercase
Привет,
Я думаю, что у Chrome есть проблема с ": first-line". Попробуйте удалить это и использовать синтаксис james31rock на этой странице, за исключением того, что в его примере CSS должен быть "#firstp {...", чтобы отражать идентификатор в его HTML, а не ".makeupper".
Чтобы выполнить это, вы должны использовать следующий псевдоэлемент в правильном синтаксисе. Пример:
HTML PORTION:
<selection id="Welcome">
<p>Some text</p>
</section>
CSS ЛИСТ:
#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}
Надеюсь, это поможет. Извините за позднюю запись. Я думаю, лучше поздно, чем никогда!
Может быть другой способ...
Что делать, если у вас есть два промежутка с текстом внутри абзаца, у одного из пролетов будет позиция, установленная в верхний левый угол абзаца, поэтому два промежутка будут перекрываться. Теперь установите высоту верхнего пролета примерно на line-height вашего текста и overflow на скрытый, поэтому будет видна только первая строка пролета. Установите text-transform в верхний регистр верхнего диапазона, и у вас есть первая строка в верхнем регистре.
Нижняя сторона этого решения, текст в верхнем регистре шире, поэтому в следующей строке могут отсутствовать слова. Вы можете исправить это, используя фиксированную ширину или попытайтесь установить letter-spacing на обоих пролетах так, чтобы ширина в верхнем регистре и строчные тексты будут такими же.
Вот jsFiddle, хотя иногда это не идеально, когда вы меняете размер окна, может быть достаточно.
Кажется, он не работает в Chrome. В I.e. текстовое преобразование. У меня нет firefox для тестирования.
http://jsfiddle.net/vJSeq/4/ - с помощью текстового оформления
http://jsfiddle.net/vJSeq/3/ - с помощью текстового преобразования
Вы можете видеть, что селектор прав, потому что он подсвечен.
Мое предложение было бы использовать что-то, чтобы выделить выделенный текст, создав тег span внутри абзаца и присвоив ему класс
<p id="firstp">to stop the degradation of the planet natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
и css
.makeupper
{
text-transform: uppercase;
}
Возможно, вы захотите использовать:
font-variant: small-caps;
Он выглядит лучше, на мой взгляд, и поддерживается во всех основных браузерах.
Дополнительная информация