如何使行内元素出现在新行上，或块元素不占据整行？

小开

最佳答案

您可以给它一个属性显示块; 这样它的行为就像一个 div 并且有自己的行

CSS:

.feature_desc {
display: block;
....
}

小开

尽管这个问题非常模糊，HTML 代码片段也非常有限，但我认为

.feature_desc {
display: block;
}
.feature_desc:before {
content: "";
display: block;
}

可能会给你想要实现的没有 <br/>的元素。虽然它将有助于看到您的 CSS 应用到这些元素。

注意: 上面的例子在 IE7中不起作用。

小开

我认为 float 在这里可能最适合你，如果你不想让元素占据整条线，那么向左浮动应该可以。

.feature_wrapper span {
float: left;
clear: left;
display:inline
}

编辑: 现在浏览器有了更好的支持，你可以利用 do inline-block。

.feature_wrapper span {
display:inline-block;
*display:inline; *zoom:1;
}

取决于文本对齐，这将通过其内联显示，同时也作为一个块元素。

小开

对于不占据整行的块元素，将其宽度设置为较小的值，并设置为 white-space:nowrap

label
{
width:10px;
display:block;
white-space:nowrap;
}

小开

span::before { content: "\A"; white-space: pre; }

小开

我在我们的 WooCommerce 网站上遇到了类似的情况。“添加到购物车”按钮就在一个自定义产品字段旁边，我需要把产品字段放在按钮下面。这就是最后为我做了这个技巧的 CSS

#product-57310 label[for="wcj_product_input_fields_local_1"] { display: -webkit-box!important; margin-top: 80px; }

其中“ # product-57310”是 Woocommerce 中产品的 ID，因此它只应用于特定的产品页面，而不是每个产品页面，并且“ label [ for = “ wcj _ product _ input _ fields _ local _ 1”]”专门针对第一个标签，以获得“ Add to ó”按钮。

小开

使用可伸缩的父代也很有效。将 flex-direction设置为 column将把每个孩子放在一个新的行和设置 align-items将使他们不占用整个宽度。这里有一个小例子:

<div class="parent">
<a>some links</a>
<a>that should be on their own lines</a>
<a>but not take up the whole parent width</a>
</div>

.parent {
display: flex;
flex-direction: column;
align-items: flex-start;
}

小开

我也遇到过类似的问题，比如:

<span>
<input>
<label>
<input>
<label>
...
</span>

我不想搞乱源 html 生成器(即使这个 html 非常糟糕)。所以我修复它的方法是在 span的顶部使用 display: grid。然后是 grid-template-columns: auto auto;

任何想做类似事情的人，现在(2021年) grid是一个很好的解决方案。

例如，对于这个特定的问题，应用 display: grid; grid-template-columns: auto auto;到 li和 grid-column: 1 / 3;到最后 span会做到这一点。

小开

使用两个 CSS 规则

word-break: break-all;
display: list-item;

CSS 选择器和主体的内部

注:

如果只处理需要放在单独行上的文本。

尝试像这样使用 word-break(注意堆栈溢出代码会自动执行此操作，但我将其包含在内是为了帮助澄清其他环境中的用法:

 word-break: break-all;

如果只处理类似 <span>的内联 HTML 元素

然后看看如何使用 html 标记上的 display: list-item将非文本元素(如锚标记)转换为行分隔元素的答案

林克

如何在 < a > 标签中进行文本换行

示例(对于像 span 这样的 HTML 内联元素)

span {
display: list-item;
word-break: break-word;
}

<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>
<span>Line 4</span>
<span>Line 5</span>

示例(文本内容)

function makePerson(name, age) {
// add code here
let person = Object.create({});
person.name = name;
person.age = age;
return person;
}


const person = makePerson('Vicky', 24);
const outputDiv = document.querySelectorAll("body .output");
const keys = Object.keys(person);


outputDiv.forEach((div,key) => {
div.innerHTML = person[keys[key]];
});

body #output{
word-break: break-all;
}

<div>
<div class="output"></div>
<div class="output"></div>
</div>