Attempting to split a heading, however, the word-wrap function seems to be malfunctioning

My recipe panels have photos and titles, but the titles are too long to fit in the designated size. Despite using word-break: break-word, it doesn't seem to be working as intended. This example illustrates my issue:

https://i.sstatic.net/HbKuI.png

Here is a snippet of 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;
}

Any suggestions on how I can resolve this issue?

htmlcss

Answer №1

To ensure proper display, adjust 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>

Answer №2

.food-menu {
    margin: 0px;
    padding: 10px;
    display: inline-flex;
    flex-wrap: wrap;
}

.item-box {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    width: 300px;
}

.item-name {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 40px;
}
<div class="food-menu">
    <div class="item-box">
        <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="item-name">Millionare's Shortbread</p>
    </div>
    <div class="item-box">
        <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for altering the color of a highlight?

I successfully got the code to function on both Firefox and Internet Explorer. My query is regarding how to modify the color of the highlight when a word is selected. Currently, it defaults to the user's browser highlight (blueish). I would like it to ...

javascripthtmlselection

What is the method to adjust the time of print's font size?

When trying to print a datatable using the following JavaScript code: <script type="text/javascript"> function data(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML ...

javascriptjquerycssdatatablebootstrap-4

Whenever I select a different option such as "desi food", it automatically activates my order button

When I click on any other button like Desi Food, Fast Food, or Drinks, my order button is clicked automatically. I don't know if the buttons are overlapping each other or what the problem is. I am a beginner at this. <form method="post" action="o ...

phphtmlbutton

How can I ensure that the content within a div does not overflow and that horizontal scrolling is enabled? What is the correct way

After designing my profile page, I encountered a problem related to horizontal scrolling caused by overflow. Despite trying various solutions like adjusting the width of .profilePg, I haven't been able to resolve this issue without disrupting the over ...

htmlcssoverflow

Add the Bootstrap CSS to the <head> section using Wicket

Currently, I am utilizing Wicket to generate the HTML content of an email. Although I prefer using Bootstrap for styling, I encounter issues since link tags are disregarded in emails... I am wondering if there is a convenient method in Wicket to import the ...

htmlcsswicket

showcase fresh material using the jquery fancybox

I have a fancybox popup using jQuery that is functioning as intended. Inside the popup, there is a link <a href="http://example.com/foo/bar.html">show another content of this fancybox</a> However, when you click on the link, the fancybox disap ...

javascriptjqueryhtmlpopupfancybox

Click here to get the button click link

Is there a method to obtain the link of a button click on a website? This is the Website and it features a play button. I am looking for a way to capture the link triggered by clicking the play button so that the audio starts playing automatically each t ...

javascriptphphtmlcssweb

Styling with CSS to create a visual countdown display

I'm trying to replicate the format shown in the image below. https://i.sstatic.net/lnW2C.png Currently, this is the code I have: https://codepen.io/Brite1/pen/wvPrggj (it seems like I just need to adjust spacing and center all numbers/text). I'm ...

javascripthtmlcss

The attempt to transfer the image to the newly established file was unsuccessful

Whenever I try to upload an image to a file named 'uploads' within the same directory as my PHP files, I keep encountering an error message indicating an 'Undefined index'. Can someone explain what this error means and provide a solutio ...

phphtml

Manipulating the content of h1 tag using Jquery when selecting from a dropdown menu

As I was exploring this Fiddle I stumbled upon, http://jsfiddle.net/JBjXN/ I've been working on a functionality where selecting an option from HTML <h1>Select a Show</h1> <select class="radio-line" id="radio-manager&quo ...

javascriptjqueryhtml

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

jqueryhtmlformsjquery-selectors

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

htmlcssalignmentbootstrap-5

What is the best way to apply a class to a container when a component in AngularJS receives focus or is clicked?

I am trying to apply a class to the container when either the input field is focused or when the dropdown component receives focus or is clicked. The class should be removed when the focus is lost. The requirement is for the input container to have the &a ...

javascriptcssangularjs

Issue: Nav component did not return any content during rendering. This typically indicates that a return statement is absent. To render nothing, you can return null

Encountering an error in my code: Error: Nav(...): Nothing was returned from render. This typically indicates a missing return statement or the need to return null. I am trying to create a styled components navbar but struggling to correct this issue... B ...

javascripthtmlcssreactjsstyled-components

What is the process for logging in using a Bootstrap modal?

I am currently working on creating a login feature using a bootstrap modal, but unfortunately, I am facing some issues with it. If anyone is willing to offer their assistance, I would greatly appreciate it. My knowledge of JavaScript and Bootstrap is limi ...

javascriptcssbootstrap-modal

Retrieve the ng-model value from one div and pass it to another div

I am trying to retrieve the value of ng-model from one div and use it in another div. HTML: <div class="form-group" ng-repeat="key in condition.keys"> <select class="form-control" ng-show="key.aggregator" ng-model="key.aggregator" ng-options ...

javascripthtmlangularjs

Web site designed with the aesthetics of Office 2007 aesthetic

Can anyone guide me to a website template that resembles the design of Office 2007? I'm hoping to find one that has similar colors, hover effects, and overall aesthetic. ...

htmlcss

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

Customize your CSS line height for the bottom of text only

Hey there, I'm pretty new to frontend development so please excuse me if this is a silly question :) I know that it's not usually done, but when you apply line-height to an element like an h1, it adds extra space both on the top and bottom of th ...

htmlcss

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

javascriptcss