使某些内容转到页面下一行的 CSS 是什么？

发布于 2024-10-30 17:06:36 字数 903 浏览 1 评论 0原文

如何使元素自动定位在页面中的新行上？在 HTML 中，我可以使用，但是如何在 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;
}

How can I move one of the

s on a new line创建一个新行？

原文

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?

Say I have the following code for example:

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

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?

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;
}

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

高冷爸爸 2024-11-06 17:06:36

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

#elementId {
    display: block;
}

这将迫使元素换行如果它不在同一行上line 作为浮动元素。

#elementId {
     clear: both;
}

这将迫使元素清除浮动，并移动到“新行”。

据我所知，如果元素与另一个 position 为 fixed 或 absolute 位于同一行，则不会，强制“换行”，因为这些元素将从文档的正常流程中删除。

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.'

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.

回复收藏 0 原文