Html 移动时将面板标题中的跨距分隔为两行

我有一个面板，面板标题如下所示，我正试图弄清楚，当移动设备<480px时，如何将其分成两行，当移动设备大于480px时，如何将其分成一行

面板标题文本更多文本

您需要

当您想根据设备的常规类型（如打印与屏幕）或特定特征和参数（如屏幕分辨率或浏览器视口宽度）修改站点或应用程序时，媒体查询非常有用

基本代码可以是：

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

演示：

@介质（最大宽度：480px）{
跨度{
显示：块；
}
}

面板标题文本更多文本