Html 将一个句子在句子中的一个确切位置分成三行

我的网页上只有一行有以下句子：

电气工程师和机械工程师 在某个@media（最大宽度）处，我想将文本像这样包装成3行（显然它将居中）：

电气工程师
&
机械工程师 如何使用CSS实现这一点

<!-- HTML -->
<h1 class="main-page-image-text">Electrical Engineer & Mechanical Engineer</h1>

/* CSS */
@media (max-width:800px) {
  .main-page-image-text h1 {
    Somehow split sentence at "&"?
}
}

电气工程师和机械工程师
/*CSS*/
@介质（最大宽度：800px）{
.主页图像文本h1{
不知何故在“&”处分句？
}
}

把

放在你想休息的地方

现在为它添加css：

.wrapper{
文本对齐：居中；
}
/*适应你的需要*/
@介质（最大宽度：2800px）{
.断点{
显示：块；
}
}

电气工程师和机械工程师

上传你的代码，谢谢你！