Что CSS сделать что-то перейти к следующей строке на странице?

Как я могу сделать элемент автоматически позиционированным в новой строке на странице? В HTML я мог бы использовать <br>, но как добавить что-то вроде line-break в CSS?

Скажем, у меня есть следующий код, например:

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

Пролет по-прежнему расположен в той же строке, что и остальная часть текста. Как перенести текст диапазона на новую строку только с помощью CSS?

Другим примером является использование display: inline-block или float:

<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>

.smalldiv {
    display: inline-block; // OR
    float: left;
}

Как перенести одну из <div> на новую строку, чтобы создать новую строку?

Ответы

Ответ 1

Есть два варианта, о которых я могу думать, но не более подробно, я не могу быть уверен, что лучше:

#elementId {
    display: block;
}

Это заставит элемент "новой строке", если он не находится в той же строке, что и плавающий элемент.

#elementId {
     clear: both;
}

Это заставит элемент очистить поплавки и перейти к новой строке.

В случае того, что элемент находится на той же строке, что и position fixed или absolute, по мере того, как я знаю, ничто не приведет к принудительной "новой строке", поскольку эти элементы удаляются из нормального потока документа.

Ответ 2

Отобразить элемент как блок:

display: block;

Ответ 3

Это зависит от того, почему что-то находится на одной линии в первую очередь.

clear в случае поплавков display: block в случае естественного потока встроенного контента ничто не победит position: absolute, так как предыдущий элемент будет выведен из него нормальным потоком.