什么是CSS，以便使内容转到页面的下一行? [英] Whats the CSS to make something go to the next line in the page?

问题描述

如何使元素自动定位在页面的新行上?在HTML中，我可以使用<br>，但是如何在CSS中添加类似换行符的内容?

How can I make an element automatically be positioned on a new line in the page? In HTML I could use <br>, but how do I add something like a line-break in CSS?

说我有以下代码示例:

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

跨度仍与文本的其余部分位于同一行.如何仅通过CSS在新行上移动跨度文本?

The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS?

另一个示例是使用display: inline-block或float的情况:

Another example is when using display: inline-block or 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>之一以创建新行?

How can I move one of the <div>s on a new line to create a new row?

推荐答案

我可以想到两个选项，但是如果没有更多细节，我无法确定哪个更好:

There are two options that I can think of, but without more details, I can't be sure which is the better:

#elementId {
    display: block;
}

如果元素与浮动元素不在同一行，这将强制该元素进入换行".

This will force the element to a 'new line' if it's not on the same line as a floated element.

#elementId {
     clear: both;
}

这将强制元素清除浮点，然后移至换行".

This will force the element to clear the floats, and move to a 'new line.'

如果该元素与position为fixed或absolute的元素在同一行上，据我所知，由于这些元素被删除，因此不会强制换行"来自文档的正常流程.

In the case of the element being on the same line as another that has position of fixed or absolute nothing will, so far as I know, force a 'new line,' as those elements are removed from the document's normal flow.

这篇关于什么是CSS，以便使内容转到页面的下一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！