CSS для выбора/стиля первого слова

Ответ 1

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

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

Ответ 2

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

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

Ответ 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 Mailing List)

Ответ 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

И используя все, что мы можем расширить это:

• ::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

Ответ 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. */

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

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

-Motekye

Ответ 6

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

Ответ 7

Используйте strong, то есть цель:

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

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

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

Ответ 8

Вот немного 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.

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

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

Ответ 9

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

В идеале, существует псевдоэлемент для первого слова, но вам не повезло, так как это не работает. У нас есть: first-letter и: first-line.

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

Ответ 10

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