如何让HTML/CSS中的游戏名称文本整体换行不拆分？

我正在用Bootstrap和自定义CSS制作个人作品集介绍网站，希望游戏全称能整体换行，而非在文本中间拆断。我试过text-break属性、单独给链接设置溢出处理，但都没效果。想问有没有办法把一段文本当成单个单词处理？是否需要编写自定义JavaScript？

代码示例： #

<p>&emsp;I am Anabelle Rosseto, a games and websites programmer! I love games such as <a class="text-danger fw-semibold text-decoration-none" href="#" target="_blank">Super Mario Bros. 3</a>, <a class="text-violet fw-semibold text-decoration-none text-break" href="#" target="_blank">The World Ends With You</a>, and <a class="fw-semibold text-decoration-none" href="#">Donkey Kong Coutry TF</a></p>

不需要写JavaScript，用以下两种方法就能解决：

• CSS强制不换行：给包含游戏标题的链接添加自定义类，比如.game-title，然后在CSS中设置：

  .game-title {
    white-space: nowrap;
  }
  

  这样整个标题会作为一个整体，不会在中间拆分，空间不足时直接整体换行到下一行。
• 用非断空格替换普通空格：把游戏标题里的空格换成 （非断空格），比如将The World Ends With You修改为The World Ends With You。浏览器会把带有非断空格的文本视为一个整体单词，不会在这些位置拆分换行。

内容的提问来源于stack exchange，提问作者user25364036