CSS, чтобы увеличить размер первого слова

Question

Это меня немного озадачило. Я хочу, чтобы первое слово всех абзацев в моем #content div было 14pt вместо значения по умолчанию для абзацев (12pt). Есть ли способ сделать это в простом CSS или я оставил обернуть первое слово в промежутке, чтобы выполнить это?

Answer 1

То, что вы ищете, это псевдоэлемент, который не существует. Есть: первая буква и: первая строка, но нет: первое слово.

Конечно, вы можете сделать это с помощью JavaScript. Вот код, который я нашел, который делает это: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Answer 2

Я должен не согласиться с Дейлом ... Сильный элемент на самом деле не тот элемент, который нужно использовать, подразумевающий что-то о значении, использовании или акценте контента, когда вы просто намереваетесь придать элементу стиль.

В идеале вы могли бы сделать это с помощью псевдокласса и таблицы стилей, но поскольку это невозможно, вы должны сделать семантически правильную разметку и использовать <span class="first-word">.

Answer 3

То же самое, с jQuery:

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

или

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

(Через 'Wizzud' в списке рассылки jQuery )

Answer 4

К сожалению, даже с подобными CSS 3 у нас все еще нет подобных :first-word :last-word и т. Д. С использованием чистого CSS. К счастью, в настоящее время есть почти JavaScript для всего, что приводит меня к моей рекомендации. Используя nthEverything и jQuery , вы можете расширить возможности традиционных псевдоэлементов.

В настоящее время действительными являются псевдо:

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

И используя nth Всё, что мы можем расширить до:

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

Answer 5

Чистое решение CSS:

Используйте псевдокласс: first-line.

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

Не проверял это. Уверен, это будет хорошо работать для вас, хотя. Я применял блочные правила к псевдоклассам раньше. Вы можете застрять с фиксированной шириной для каждого первого слова, так выравнивание текста: центр; и дать ему хороший фон или что-то для борьбы с отрицательным пространством.

Надеюсь, что это работает для вас. :)

-Motekye

Answer 6

Вы должны обернуть слово в промежуток, чтобы выполнить это.

Answer 7

Вот немного JavaScript и jQuery, которые я создал вместе, чтобы обернуть первое слово каждого абзаца тегом <span>.

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

Затем вы можете использовать CSS для создания стиля для .firstWord.

Он не идеален, так как не учитывает все типы пробелов; однако, я уверен, что это может сделать то, что вам нужно, с помощью нескольких настроек.

Имейте в виду, что этот код будет выполняться только после загрузки страницы, поэтому для просмотра эффекта может потребоваться доля секунды.

Answer 8

Используйте элемент strong , то есть его назначение:

<div id="content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

Затем создайте для него стиль в своей таблице стилей.

#content p strong
{
    font-size: 14pt;
}

Answer 9

Для этого не существует простого метода CSS. Возможно, вам придется пойти с JavaScript + Regex, чтобы появиться в промежутке.

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

Возможно, вы сможете использовать комбинацию: after или: before, чтобы добраться до нее без использования span.

Answer 10

Вставьте тег Span в текст вашего абзаца. Например- <p><span>Hello</span>My Name Is Dot</p а затем введите первую букву.