Stylus|CSS каждое слово выше на ХХpx

408

21 февраля 2017, 18:30

Есть предложение в теге span или div.

<span>Есть предложение в теге span или div.</span>

Можно ли с Stylus или CSS задать стиль для отдельного слова, наподобие span:nth-child(3):

span:nth-child(3)
position relative
top -4px

Версия CSS, для тех, кто stylus не знает...

span:nth-child(3) {
    position: relative;
    top: -4px;
}

Возможно, как-то задать display: table-cell; и для table-cell задать свой стиль? Может, word-spacing специальный...?

Answer 1

Можно использовать:

::nth-word()

::first-word

::last-word

::nth-last-word()

UPDATE:

Виноват - эти теги не работают. Оказывается, это были просто предложения для внесения в будущую версию css.

Остается только javascript.

<body>
<span class="ladder">Есть предложение в теге span или div.</span>
<script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous">
</script>
<script>
    jQuery(document).ready(function($) {
        var words = $('.ladder').text().split(" ");
        $('.ladder').empty();
        var top = 0;
        $.each(words, function (i, v) {
            var word = $('<span>').text(v + ' ').css('position', 'relative').css('top', '-' + top + 'px');
            $('.ladder').append(word);
            top += 2;
        });
    });
</script>
</body>

Работающая страница на моем тестовом сайте.