CSS - применяется дополнение к встроенному элементу через две строки

Ответ 1

Использование jQuery для обертывания каждого слова внутри вашего h1 в промежуток будет в значительной степени делать трюк. Я не знаю, как это влияет на SEO, хотя, если честно.

Это то, что я использую, когда мне нужно это сделать.

$("h1").each(function() 
    {
        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
        }

        $(this).html(headerContent.join(' '));
    }
);

http://jsfiddle.net/Cnuzh/

Я думаю, что на самом деле я получил это от ответа от аналогичного вопроса здесь, на stackoverflow некоторое время назад. Я напишу ссылку на оригинал автора, если это так. Я загляну в него завтра, но сначала мне нужна моя приятная теплая кровать ^^

Надеюсь, что это помогло,

WJ

Ответ 2

Если вы видите, что эффект видится только в браузерах WebKit/Blink, вы должны использовать

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Что именно вы хотите, как здесь: http://jsfiddle.net/Cnuzh/13/

Ответ 3

если вы добавите

white-space:pre-wrap;

на ваш h1 он будет выглядеть следующим образом:

По-прежнему пытаюсь понять способ добавления пространства до (i)!

EDIT: проверьте это: http://jsfiddle.net/ahmad/6qVVD/10/

- По-прежнему нужен способ обернуть последнее слово с помощью jQuery -

Завершение последнего слова с помощью span с помощью jQuery

$('h1').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});

Рабочий пример: http://jsfiddle.net/6qVVD/12/

Как вы видите, он отлично работает

Ответ 4

Встроенные элементы не поддерживают прокладку и маржу хорошо, поэтому сделайте блок или встроенный блок (который не является перекрестным браузером) Почему вы делаете это inline btw?

Ответ 5

Мой босс любит использовать эту функцию в своих проектах в последнее время, поэтому мне пришлось придумать некоторые решения. К счастью для большинства из тех, что мы делаем, они предназначены для титров на слайдерах, которые всегда будут на двух строках, поэтому я решил использовать до и после, чтобы вставить линию 10px перед каждой строкой текста. Не очень хорошая совместимость с браузером, которую я знаю, но работает нормально и не выглядит ужасно в IE.

Здесь немного jsFiddle, чтобы объяснить это:

http://jsfiddle.net/mP5vg/

Это единственное чистое решение для CSS, которое я мог найти.

P.S. Извините за мой грязный код.

Ответ 6

Демо здесь: http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}

Ответ 7

EDIT: nvm, не заметила белую линию; не давали бы и nbsp; вместо регулярных пробелов?

дайте ему отображение встроенного блока, обязательно сделайте его отображаемым: inline для ie7

регулярныеЗабастовкa >

h1 { display:inline-block }

ie7 only

h1 { display:inline}

Ответ 8

Вот еще один трюк для этого:

Поместите <H1> в другой div и дайте ему border-left, но перед этим удалите дополнение из <H1> css

<div id="wrap">
    <div class="fix">
       <h1>Specialists in retirement income</h1>
    </div>
</div>

CSS

body { background:#ddd; }
#wrap { width:400px; background:white; }

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    word-spacing:10px;
    font: 30px/1.4 Arial, sans-serif;
    white-space:pre-wrap;
}

.fix {
    border-left:20px solid #41a293;
    }

Смотрите fiddle

Ответ 9

Может быть, white-space:nowrap; - это некоторое решение.

Ответ 10

В соответствии с этим потоком на WebmasterWorld, который является 2-летним BTW, это должно произойти в соответствии с рекомендации W3.

Попробуйте следующее: http://jsfiddle.net/laheab/6MhDU/

Просто дайте каждому слову свой собственный элемент <p>, и вы все равно получите желаемый эффект.