Css 在480宽屏幕中查看时，我需要在单词后添加一个

在480宽屏幕中查看时，我需要在单词后添加一个

例如桌面

<img src="images/phone_icon.png">1-000-000-0000(Int.)
<img src="images/phone_icon.png">1-000-000-0000(US)

我需要在Int之后添加一个。当屏幕达到480width时 应该转到下一行

是否有伪类或css代码来添加该标记

---

提前谢谢你

你可以做个小动作。在Int之后添加空span，如下所示

<img src="images/phone_icon.png">1-626-389-8668(Int.)
<span class="break"></span>
<img src="images/phone_icon.png">1-866-933-7368(US)

---

在每组图像和文本中添加一个包装器，并通过媒体查询进行处理，这可能是最有意义的。像这样：

更新HTML:

---

输入错误：显示不禁用…这是一种不好的做法，不尝试使用火焰，但除非绝对必须使用空元素，否则不应使用空元素。因此，使用内联元素作为块元素也不好。谢谢编辑，，我不知道如何让它像那样显示。有一个用于代码块的按钮，或者你可以简单地将它们缩进4个空格。对于内联代码，您可以在其周围加上记号。谢谢您的提示。刚开始使用stackoverflow学习css3/html5，我很喜欢。有很多专业的网络开发者真的很乐于助人并分享他们的知识。再次感谢这个答案的变体：您还可以将数字本身包裹起来，并使用伪元素：@KennyGHanson也可以。我只是想知道为什么需要换行，似乎是为了让图像和文本保持在一条线上。因此，在语义上，将图像和文本分组似乎更合适，因为它们似乎被视为一个单元。虽然完全有可能我读得太多了。

@media all and (max-width: 480px){
  .break {
    display: block;
  }
}

<span class="wrapper">
    <img src="images/phone_icon.png"/>1-626-389-8668(Int.)
</span>
<span class="wrapper">
    <img src="images/phone_icon.png"/>1-866-933-7368(US)
</span>

@media (max-width: 480px) {
    .wrapper{
        display: block;    
    }
}