我想不通如何用CSS做到這一點。如果我只是用一個& ltbr & gt標簽，它可以完美地工作，但是由于顯而易見的原因，我盡量避免這樣做。

基本上我只想。feature_desc span重新開始一行，但是:

如果我把它變成一個內聯元素，它就不會有換行符。 如果我把它做成一個block元素，它會擴展到適合整行，把每個圖標放在自己的行上，在屏幕上浪費大量的空間(每個。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>

有什么想法嗎？還是我走錯了路？

你可以給它一個屬性顯示塊；所以它的行為就像一個div，有自己的行

CSS:

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

即使這個問題很模糊，HTML片段也很有限，我想

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

可能會給你想要的東西。br/>；元素。盡管看到CSS應用于這些元素會有所幫助。

注意。不過上面的例子在IE7中并不適用。

我認為浮動在這里最適合你，如果你不想讓元素占據整行，浮動在左邊應該可以。

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

編輯:現在瀏覽器有了更好的支持，你可以使用do內嵌塊。

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

根據文本對齊方式，這將通過其內聯顯示，同時也像塊元素一樣。

因為block元素并不占據整行，所以將其寬度設置為較小的值，并使用空白:nowrap

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

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

僅使用CSS - Designcise強制換行/換行

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

我在我們的WooCommerce網站上遇到了類似的情況。“添加到購物車”按鈕就在定制產品字段的旁邊，我需要將產品字段放到按鈕下面。這是最終讓我成功的CSS

# product-57310 label[for = & quot；wcj _ product _ input _ field _ local _ 1 & quot；] { display: -webkit-box！重要；邊距-頂部:80px}

其中“#product-57310”是woocommerce中產品的ID，因此它僅適用于特定的產品頁面，而不是每個產品頁面，其中“label[for = " wcj _ product _ input _ fields _ local _ 1 "]”專門將第一個標簽定位到“添加到購物車”按鈕下。

我也遇到過類似的問題，比如:

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

我不想弄亂html生成器的源代碼(盡管這個html很糟糕)。所以我的解決方法是在頂部跨度上使用一個顯示:網格。然后網格-模板-列:auto auto

任何想做類似事情的人，網格現在(2021年)都是一個好的解決方案。

例如，對于這個特殊的問題，應用 顯示:網格；網格-模板-列:自動自動；至李和格—柱:1/3；持續一段時間就夠了。

使用兩個CSS規則

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

CSS選擇器和主體內部

注意:

如果只是處理需要放在單獨行上的文本。

嘗試像這樣使用斷詞(注意堆棧溢出代碼會自動這樣做，但我將它包括在內是為了幫助澄清在其他環境中的用法:

word-break: break-all;

如果只是處理像a & ltspan & gt

然后看看這個答案，如何使用html標簽上的display: list-item將非文本元素(如錨標簽)轉換為行分隔元素

環

如何在& lta & gt標簽自動換行

示例(對于像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>

注入換行符| CSS技巧

.feature_desc span {
    display: table;
}

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