<span> 当无法适应屏幕宽度时，我可以更改 css <span> 吗？

Question

当我减小屏幕宽度时，有没有办法修改元素的css，使其保持行而不是下降到下一行？

Answer 1

如果要强制span保持内联，请在父标记上使用display:inline-flex;。这样：

<div style="display: inline-flex;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>

Answer 2

我要试一试。假设你有一个这样的 HTML 结构：

<div class="keepInLine">
     <span>This is a span</span>
     <span>This is another span</span>
</div>

并且您希望跨度保持一致，您可以使用"空白：nowrap;"：

.keepInLine{
    white-space: nowrap;
 }

由于 span 元素默认是内联的，这会将它们保持在一行中。参考： W3C语言

对于上面这样的简单示例，无需使用媒体查询。但是，如果您的 HTML 结构不同，或者您想要其他内容，则可能需要使用媒体查询。

例如，如果要更改 SPAN 元素的宽度，使其完全适合屏幕，则需要媒体查询：

@media (max-width: 600px) {
  .keepInLine span {
display:inline-block;
    width:300px;
  }
}

或者，您可以以百分比形式定义跨度的宽度：

.keepInLine span{
     width:50%;
  }

这也将使它们并排放置。

如果我知道你的 HTML 结构，我可以更好地帮助你......

Answer 3

是的，这是可能的，只需使用媒体查询。以下是文档： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但这里有一个简单的例子：

div{
  width: 300px;
  background-color: red;
}
@media (min-width: 700px){
    div{
        width: 150px;
        background-color: green;
    }
}

以及更多的阅读 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/