Trying to break a title, but word-break isn't working-CodePudding

I have some panels for recipes which have a photo and a title, but the title is too long and I need it to be that size. But word-break: break-word; isn't working. This is what I mean:

This is my code:

    <div >
    <div >
    <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 >Millionare's Shortbread</p>
    </div>
    <div >
    <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;
}

How can I fix this?

CodePudding user response：

You need to set the width of .recipe-window to min-content.

.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: min-content;
}

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

<div >
  <div >
    <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 >Millionare's Shortbread</p>
  </div>
  <div >
    <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>

CodePudding user response：

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

.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;
}

<div >
    <div >
        <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 >Millionare's Shortbread</p>
    </div>
    <div >
        <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>