如果不合适，则将整个跨度换行答案

【问题标题】：Wrap entire span on new line if doesn't fit如果不合适，则将整个跨度换行
【发布时间】：2016-10-29 14:47:46
【问题描述】：

我有两个子 div 20% 和 80%。最后一个包含嵌套的spans，如果文本不适合同一行，它会按单个单词移动到下一行（默认行为）。

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

但是如果 span 中的文本不适合该行，则我需要实现下一个结果，将整个 span 移动到下一行。

我已经试过了：

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

这不会将文本移动到下一行，而是使第一个 div 更小，以便为文本获得可用空间，这是不可取的行为。

而我想实现：

是否可以仅使用 CSS 获得这样的结果？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

<span> 标签默认是内联的，所以当发生换行时，里面的文本会中断。您可以将其设置为display: inline-block，以便它作为一个整体呈现也保持内联级别。请注意，换行可能仍会发生，但前提是文本长度超过父容器。

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

display: inline-block该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素）-MDN

对于您尝试实现的布局，您可以将文本“阅读更多”包装到<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，但示例中的左/右间距和上/下间距不同，如果您需要像素完美，请遵循this post。

更新

还有更好的办法，就是CSS3flexbox，看看下面的sn-p。

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>

【讨论】：

【解决方案2】：

试试这个：

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

inline-block 元素是一个始终保持为块（但在文本流内）的单元，它只能作为一个整体移动而不能被分割。

【讨论】：

【解决方案3】：

您正在使用display: table，并且调整 div 大小的行为正是因为如此。我建议将您的显示更改为inline-block，如上面的答案所述，并通过line-height垂直对齐它

【讨论】：