标题换行失效：word-break: break-word属性不生效问题求助

我制作了带有图片和标题的食谱面板，标题过长且需要保持当前字号，但设置word-break: break-word后仍无法实现换行效果。以下是我的代码，请问该如何修复？

<div class="recipe-container">
  <div class="recipe-window">
    <a href="https://www.bbcgoodfood.com/recipes/easy-millionaires-shortbread"><img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272"></a>
    <p class="recipe-title">Millionare's Shortbread</p>
  </div>
  <div class="recipe-window">
    <a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf"><img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272"></a>
  </div>
</div>

.recipe-container {
    margin: 0px;
    padding: 10px;
    display: inline-flex;
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    word-break: break-word;
    width: auto;
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 40px;
}

问题根源在于：

1. .recipe-window设置width: auto，在inline-flex容器中会自动撑开宽度容纳内容，无法触发换行
2. word-break: break-word作用在容器而非标题元素上，没有对标题生效

修改后的CSS代码如下：

.recipe-container {
    margin: 0px;
    padding: 10px;
    display: inline-flex;
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    width: 300px; /* 固定宽度，与图片宽度匹配 */
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 40px;
    overflow-wrap: break-word; /* 针对长单词换行，更适合英文场景 */
    word-break: break-word; /* 兼容部分旧浏览器 */
}

关键说明 #

• 给.recipe-window设置固定宽度是核心，这样容器不会无限撑开，标题超出宽度就会触发换行
• overflow-wrap: break-word优先处理长单词拆分，比单独使用word-break更适合英文文本的换行需求

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