如果不適合，將整個跨度包裹在新行上

Question

我有兩個孩子div 20％和80％。 最后一個包含嵌套的span s，如果文本不適合同一行，則在單行上移動下一行（默認行為）。

HTML：

<div class="post-short-footer">
   <div class="read-more-post"></div>
   <div class="post-short-meta-container">
      <span class="posted-on"><i class="fa fa-calendar" aria-hidden="true">Some text</i></span>
      <span class="cat-links"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Some text</span>
      <span class="comments-link"><i class="fa fa-comment-o" aria-hidden="true"></i></span>
   </div>
</div>

CSS：

.post-short-footer {
    display: table;
    width: 100%;
}
.read-more-post {
    height: 100%;
    display: table-cell;
    vertical-align: middle;    
    width: 20%;
    padding: 0.6em 0.6em;
    border-radius: 0.3em;
    text-align: center;
    border: 1px solid #3b9be5;
}
.post-short-meta-container {
    display: table-cell;
    padding-left: 1em;
    width: 80%;
    line-height: 100%;
    vertical-align: middle;
    height: 100%;
}

但是如果跨度中的文本不適合行移動整個跨度到下一行，我需要實現下一個結果。

我已經嘗試過：

.post-short-meta-container span {
    white-space: nowrap;
}

這不會將文本移動到下一行，而是使第一個div變小以獲得文本的空閑空間，這不是理想的行為。

我希望實現：

是否可以僅使用CSS獲得此類結果？

Answer 1

默認情況下， <span>標記是內聯的，因此當包裝發生時，內部文本將會中斷。 您可以將其設置為display: inline-block ，使其呈現為整個塊也保持內聯級別。 請注意，僅當文本長度超過父容器時，仍可能發生換行。

.post-short-meta-container span {
  ...
  display: inline-block;
}

display: inline-block該元素生成一個塊元素框，它將與周圍的內容一起流動，就好像它是一個單獨的內聯框（行為很像被替換的元素） - MDN

對於您嘗試實現的布局，您可以將文本“Read more”包裝到<a>標簽中，並在其上設置按鈕鏈接樣式而不是表格單元格，請參閱下面的更新演示。

的jsfiddle

 .post-short-footer { display: table; width: 100%; } .read-more-post { height: 100%; display: table-cell; vertical-align: middle; width: 20%; text-align: center; } .read-more-post a { white-space: nowrap; border: 1px solid #3b9be5; padding: 0.6em 0.6em; border-radius: 0.3em; display: block; } .post-short-meta-container { display: table-cell; padding-left: 1em; width: 80%; line-height: 100%; vertical-align: middle; height: 100%; } .post-short-meta-container span { display: inline-block; padding: 0.3em; margin: 0.3em; border: 1px dotted red; } 

 <div class="post-short-footer"> <div class="read-more-post"> <a href="#">Read more</a> </div> <div class="post-short-meta-container"> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> </div> </div> 

您可能會注意到給定相同的margin但左/右間距和頂部/底部間距在示例中不相同，如果您需要像素完美，請按照此帖子操作 。

UPDATE

還有一種更好的方法，即CSS3 flexbox ，請查看下面的代碼段。

的jsfiddle

 .post-short-footer { display: flex; } .read-more-post { display: flex; align-items: center; } .read-more-post a { border: 1px solid #3b9be5; padding: 0.6em 0.6em; border-radius: 0.3em; white-space: nowrap; margin-right: 10px; } .post-short-meta-container { flex: 1; display: flex; flex-wrap: wrap; align-items: center; } .post-short-meta-container span { padding: 0.3em; margin: 0.3em; border: 1px dotted red; } 

 <div class="post-short-footer"> <div class="read-more-post"> <a href="#">Read more</a> </div> <div class="post-short-meta-container"> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> <span>Some text here</span> </div> </div> 

Answer 2

試試這個：

.post-short-meta-container > span {
  display: inline-block;
}

inline-block元素是一個始終保持塊（但在文本流中）的單元，它只能作為一個整體移動而不能被分割。

Answer 3

您正在使用display: table ，因此調整div的大小的行為就是這樣。 我建議將顯示更改為inline-block如上面的答案所述，並通過line-height垂直對齊