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

Question

我不知道如何用 CSS 做到这一点。如果我只使用<br> 标签，它可以完美运行，但出于显而易见的原因，我会尽量避免这样做。

基本上，我只希望 .feature_desc span 在新行上开始，但是：

• 如果我将其设为内联元素，则不会有换行符。
• 如果我将其设为块元素，它将展开以适应整行，将这些图标中的每一个放在自己的行上，并在屏幕上浪费大量空间（每个 .feature_wrapper 的大小会略有不同，但没有一个会像整个屏幕那么宽。）

示例代码：这可行，但使用br 标签：

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

我想用 CSS 设置样式以达到相同的效果：

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

有什么想法吗？还是我走错了路？

Answer 1

你可以给它一个属性显示块；所以它会表现得像一个 div 并且有自己的行

CSS：

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

Answer 2

尽管问题很模糊，HTML sn-p 也很有限，但我想

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

可能会给你想要在没有<br/> 元素的情况下实现的目标。尽管将您的 CSS 应用于这些元素会有所帮助。

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

Answer 3

我认为浮动在这里可能最适合您，如果您不希望元素占据整行，则将其向左浮动应该可以。

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

编辑：现在浏览器有更好的支持，您可以使用 do inline-block。

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

根据文本对齐方式，这将通过其内联显示，同时也像块元素一样。

Answer 4

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

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

Answer 5

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

Answer 6

我在我们的 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"]" 的目标是第一个标签专门用于“添加到购物车”按钮下。

Answer 7

使用 flex 父级也可以。 将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;
}

Answer 8

我遇到过类似的问题：

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

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

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

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

Answer 9

使用两条 CSS 规则

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

在 CSS 选择器和正文中

---

注意：

如果只处理需要分行的文本。

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

 word-break: break-all;

如果只处理像<span>这样的内联HTML元素

然后查看这个答案，了解如何在 html 标记上使用 display: list-item 将非文本元素（如锚标记）转换为行分隔元素

链接

How to make text in <a> tag wordwrap

---

示例（对于像 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>