在移动视图下一行显示跨度元素的最佳方法

Question

我正在寻找最好的解决方案以在此处显示这些span元素：

我尝试了以下操作：

from collections import Counter
mydict_countalpha = {k:v for k,v in Counter(sent).items() if k in alpha}

.card { .gallery-text { display: flex; // margin-left: 60px; // display: block; } 实际上是导致链接与“视图”和“单词”相撞的原因，而display: flex;是使span元素显示在下一行的原因。

有人有更好的主意吗？

Answer 1

简单的解决方案：只需使用<br>标签。

Answer 2

<p>标签称为块级元素，将自动跳过行。

<p>some text</p>
<p>other stuff</p>

<span>标签是内联元素，除非使用<br/>标签告知它们，否则它们不会折行（跳过行）。

<span>some text</span>
</br>
<span>other stuff </span>

或者，在提供的示例中，您可以使用 在文本链接之间强制使用“不间断空格”字符。

<span>...full gallery</a>&nbsp;to</span>

Answer 3

设置媒体查询并添加

span{
white-space: pre;
}

Answer 4

我最终在mixin中为display: flex;设置了flex-direction:row和justify-content:center;的{​​{1}}，但是后来我不得不去.gallery-text并添加.view-full-gallery和padding-left: 5px;似乎可以解决问题。