CODEWITHSUNDEEP
htmlcss
user20197071
user20197071

Reputation:

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

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:

enter image description here

This is my code:

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

How can I fix this?

Upvotes: 0

Views: 43

Answers (2)

Ivan
Ivan

Reputation: 11

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

Upvotes: 0

Sli4o
Sli4o

Reputation: 234

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 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>

Upvotes: 2

Related Questions