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

Цей мене задубив. Я хочу зробити перше слово з усіх абзаців у своєму #content div на 14pt замість типового для абзаців (12pt). Чи є спосіб зробити це в прямому CSS, чи я залишив обертати перше слово в проміжок для цього?

Те, що ви шукаєте, - це псевдоелемент, якого не існує. Існує: перша буква та: перший рядок, але немає: перше слово.

Звичайно, ви можете зробити це за допомогою JavaScript. Ось деякий код, який я знайшов, що робить це: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

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

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

Те саме, з 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 )

На жаль, навіть для подібних 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

І використовуючи n-те Все, що ми можемо розширити це до:

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

Чисте рішення 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. */

Не перевіряв це. Впевнений, це буде добре працювати для вас. Я раніше застосовував правила блоків до псевдокласів. Можливо, у вас зафіксовано фіксовану ширину для кожного першого слова, тому вирівнювання тексту: center; і дайте йому приємний тло або щось для боротьби з негативним простором.

Сподіваюся, це працює для вас. :)

-Мотеке

Для цього потрібно обернути це слово в проміжок часу.

Використовуйте сильний елемент, тобто його призначення:

<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 + регулярним виразом, щоб з’явитись у певному інтервалі.

В ідеалі для першого слова міг би бути псевдоелемент, але вам не пощастило, оскільки це, здається, не працює. У нас є: перший лист і: перший рядок.

Можливо, ви зможете скористатися комбінацією: after або: before, щоб досягти цього, не використовуючи інтервал.

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

Простий спосіб зробити це за допомогою HTML + CSS:

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>