CSS для увеличения размера первого слова

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

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

то же самое с jQuery:

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

или

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

(через 'Wizzud' на список рассылки jQuery)

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

используйте: псевдокласс первой строки.

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

к сожалению, даже с подобными CSS 3 у нас все еще нет подобных :first-word:last-word etc с использованием чистого 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

вы должны обернуть слово в span, чтобы достичь этого.

использовать сильный элемент, то есть его цели:

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

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

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

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

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

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

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

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

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

вставить тег Span в текст абзаца. например- <p><span>Hello</span>My Name Is Dot</p а затем стиль первой буквы.