如果不适合,将整个跨度包裹在新行上

Question

我有两个孩子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%;
}

但是如果跨度中的文本不适合行移动整个跨度到下一行,我需要实现下一个结果.

我已经尝试过:

.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因素是,总是保持一个块(但文本流中)的单位,它只能被移动作为一个整体,不被分割.