Html 如果不适合，则将整个跨度包裹在新行上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38056482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap entire span on new line if doesn't fit
提问by CROSP
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).
我有两个子 div 20% 和 80%。最后一个包含嵌套的spans，如果文本不适合同一行，则将其移动到下一行单个单词（默认行为）。
HTML:
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:
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.
但是如果跨度中的文本不适合该行将整个跨度移动到下一行，我需要实现下一个结果。
I already tried:
我已经尝试过：
.post-short-meta-container span {
white-space: nowrap;
}
This doesn't move text to the next line instead it makes first divsmaller in order to get free space for text and this is not desirable behavior.
这不会将文本移动到下一行，而是先div缩小文本以获得可用空间，这是不可取的行为。
And I want to achieve:
我想实现：
Is it possible to get such result using only CSS?
是否可以仅使用 CSS 获得这样的结果？
回答by Stickers
The <span>tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-blockso 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.
该<span>标签是内嵌在默认情况下，所以当发生包裹里面的文字将打破。您可以将其设置为display: inline-block使其呈现为整个块也保持内联级别。请注意，换行可能仍会发生，但前提是文本长度超过父容器。
.post-short-meta-container span {
...
display: inline-block;
}
display: inline-blockThe 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
display: inline-block该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单独的内联框（表现得很像被替换的元素） - MDN
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.
对于您要实现的布局，您可以将文本“阅读更多”包装到一个<a>标签中，并在其上设置按钮链接样式而不是表格单元格，请参阅下面的更新演示。
.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>You may notice given the same marginbut the left/right spacing and top/bottom spacing is not the same in the example, follow this postif you need it to be pixel perfect.
您可能会注意到给出的相同margin但左/右间距和上/下间距在示例中不同，如果您需要像素完美，请遵循此帖子。
UPDATE
更新
There is a better way to do it, that is CSS3 flexbox, check out the snippet below.
有一个更好的方法，那就是 CSS3 flexbox，查看下面的代码片段。
.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>回答by Johannes
Try this:
尝试这个：
.post-short-meta-container > span {
display: inline-block;
}
An inline-blockelement is a unit that always remains a block (but within the text flow), which can only be moved as a whole and not be divided.
一个inline-block因素是，总是保持一个块（但文本流中）的单位，它只能被移动作为一个整体，不被分割。
回答by Kiss
You are using display: table, and the behavior of resizing your divs are because of that.
I would advise to change your display to inline-blockas said on the answer above and vertical aligning it through line-height
您正在使用display: table，并且调整 div 大小的行为就是因为这个。我建议将您的显示更改inline-block为上面的答案中所述并垂直对齐line-height
