如果不合适，将整个跨度换行 [英] Wrap entire span on new line if doesn't fit

问题描述

我有两个孩子div，分别为20％和80％.最后一个包含嵌套的 span ，并且如果文本不适合同一行，则将单个单词移动到下一行(默认行为).

I have two child divs 20% and 80%. The last one contains nested spans and in case of text doesn't fit on the same line it is moved on the next line by single word (default behavior).

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

但是，如果跨度中的文本不适合该行，则需要将下一个结果移至下一行.

But I need to achieve next result if text in span doesn't fit the line move whole span to the next line.

我已经尝试过:

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

这不会将文本移到下一行，而是使第一个 div 变小，以便获得文本的自由空间，这是不可取的行为.

This doesn't move text to the next line instead it makes first div smaller in order to get free space for text and this is not desirable behavior.

我想实现:

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

Is it possible to get such result using only CSS?

推荐答案

默认情况下，< span> 标记是内联的，因此在发生换行时，其中的文本将中断.您可以将其设置为 display:inline-block ，这样它作为一个整体呈现的块也保持内联级别.请注意，换行仍然可能发生，但前提是文本长度超过了父容器.

The <span> tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-block so that it renders as a whole block also remains inline level. Note, wrapping may still happen but only if the text length exceeds the parent container.

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

display:inline-block 该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内嵌框一样(与被替换的元素非常相似)- MDN

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> 标记中，并在其上设置按钮链接样式，而不是表格单元，请参见下面的更新演示.

And for the layout you're trying to achieve, you can wrap the text "Read more" into a <a> tag, and set the button link style on it instead of the table cell, see the updated demo below.

jsFiddle

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 ，但是示例中的左右间距和顶部/底部间距不相同，请遵循

You may notice given the same margin but the left/right spacing and top/bottom spacing is not the same in the example, follow this post if you need it to be pixel perfect.

更新

还有一种更好的方法，那就是CSS3 flexbox ，请查看下面的代码段.

There is a better way to do it, that is CSS3 flexbox, check out the snippet below.

jsFiddle

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>

这篇关于如果不合适，将整个跨度换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！