Как перенести span на следующую строку с помощью css?

Question

[Богдан Пономаренко]

<h1>Текст <span class="lineBreak">перенос</span></h1>

Как перенести lineBreak на следующую строку используя только css?
У спана position:absolute*

Comments

[Dalp]

А чем обосновано использование только css? Почему бы не использовать div вместо span? Или использовать <br>. В конце концов если вы пропишите display: block; в .lineBreak, то просто превратите span в div.

[Богдан Пономаренко]

в lineBreak мне нужно чтоб было именно absolute

[Богдан Пономаренко]

и перенос должен быть не всегда, так что br не подходит

[Dalp]

Богдан Пономаренко,

<h1>Текст <div style="position:absolute;">перенос</div></h1>

Нет?

[Богдан Пономаренко]

Dalp, или, можно было бы на js вставить br на определенном размере экрана, но если можно, было бы хорошо на чистом css

[Dalp]

Богдан Пономаренко, перенос должен быть не всегда, а когда?

[Владислав Черненко]

Богдан Пономаренко, если перенос будет не всегда, тогда меняйте просто класс блоку... а то вы хотите, чтобы один и тот же код вел себя по разному

[Богдан Пономаренко]

Dalp, перенос строки нужен,ч тобы был эффект как от br перед span

[Богдан Пономаренко]

Владислав Черненко, а как сам перенос сделать?

[Dalp]

Богдан Пономаренко, Вы можете пояснить когда перенос должен быть, а когда нет?

[Ankhena]

Не понятно зачем спану абсолют. А если нужен абсолют, то о каком переносе речь?

Просто
.lineBreak {display: block}

[Богдан Пономаренко]

Dalp, мне просто нужен эффект такого кода только без br, и при этом чтобы lineBreak был абсолютным

<h1>Текст <br> <span class="lineBreak">перенос</span></h1>

,

[Владислав Черненко]

Богдан Пономаренко, выше вам написали... я просто удалил ответ, думал тут все запутаней... но так и не понятно что когда нужно)

[Богдан Пономаренко]

Ankhena, вот поэтому я и спрашиваю, мне нужно чтобы lineBreak был именно абсолютным

[iBird Rose]

Богдан Пономаренко, для чего тебе он абсолютом - ты это обьясни. всю ситуацию обрисуй. тогда тебе помогут нормально сделать.

[Богдан Пономаренко]

Владислав Черненко, у меня в спане происходят постоянные изменения текста (каждые пару секунд меняется слово), поэтому я сделал его абсолютным, чтобы не влиял на разметку (т.к. постоянно происходит перенос текста и сдвигает нижестоящие элементы). И вот мне нужно, чтобы при определенном размере это слово было перенесено на другую строку (т.к. уползает за границы экрана). Подробней тут botisho.realnost.club

[Ankhena]

Богдан Пономаренко,

мне нужно чтобы lineBreak был именно абсолютным

Зачем?

Абсолюту нужно добавить координаты и relative тому родителю относительно которого вы собрались его позиционировать.

В противном случае вы получите типа того https://jsfiddle.net/43egpv92/

[Владислав Черненко]

Богдан Пономаренко, не спасет вас absolute, слово будет налазить на контент поверх него... Проще тогда заголовку задать:

h1(
    min-height: 80px;
}

и убрать этот absolute вовсе... отступ будет больше, зато ничего не будет смещаться

Answer 1

[Ilya Olovyannikov]

мне кажется нормальный выбор в связке с медиазапросами. Где он не нужен display: none;