html - 如果不合适，将整个跨度换行

Question

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

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 获得这样的结果？

Answer 1

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

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

display: inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) - 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如果您需要像素完美。

更新

有更好的方法，那就是 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>