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

对于你想要实现的布局，你可以包装文字＆＃34;阅读更多＆＃34;进入<a>标签，并在其上设置按钮链接样式而不是表格单元格，请参阅下面的更新演示。

<强> jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

您可能会注意到相同的margin，但左/右间距和上/下间距在示例中并不相同，如果您需要像素完美，请按this post。

<强>更新

有一种更好的方法，即CSS3 flexbox，请查看下面的代码段。

<强> jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

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

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

Answer 3

您正在使用const initialState = Immutable.fromJS({ job: [ {text: 'a'}, {text: 'b'} ] }) console.log(initialState.toJS()); const newState = initialState.deleteIn(["job","0"]) console.log(initialState.toJS()); console.log(newState.toJS());，并且调整div的大小是因为这一点。我建议将显示更改为const path = _.toPath("job[0].text") //["job", "0", "text"] const value = initialState.getIn(path) //a，如上面的答案中所述，并通过display: table垂直对齐

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

3 个答案: