When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only when it reaches the end of the block.

.card {
    display: grid;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-description {
    padding: 1rem;
    overflow-wrap: break-word;
}

Despite trying to set max-width to 100px, it did not work as expected. I am looking for a better solution where the text breaks only at the block level.

https://i.stack.imgur.com/KTxmR.png

htmlcss

Answer №1

The main issue you're facing is that grid items may have a default min-width (and min-height) of auto under certain circumstances. This default behavior is based on the width of your text content. Check out the specification for more information.

To overcome this, try setting min-width: 0; on your grid items to override the default value and effectively apply overflow-wrap: break-word; or word-wrap: break-word;.

Another approach is to set overflow: hidden; on your grid items individually instead of on the entire grid container as you are currently doing. This should prompt the browser to automatically adjust the grid item's min-width to 0, allowing you to use overflow-wrap: break-word; or word-wrap: break-word;.

Additionally, consider these alternative solutions:

  1. Experiment with overflow-wrap: anywhere; as an alternative to overflow-wrap: break-word;. The former option aggressively considers breakpoints ("soft wrap opportunities") when determining the element's minimum content size, so be cautious when combining it with width: min-content;.

  2. Try using word-break: break-all;. While this solution may seem drastic, it forces text wrapping at the end of its container disregarding other line break possibilities.

Answer №2

give this a shot

.card-info {
    padding: 1rem;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    hyphens: auto; 
}

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

Identifying when a user is idle on the browser

My current project involves developing an internal business application that requires tracking the time spent by users on a specific task. While users may access additional pages or documents for information while filling out a form, accurately monitoring ...

javascripthtmlbrowserwebbrowser-control

Troubleshooting: Issues with Jquery's replaceWith function

I'm facing an issue with a table I have that includes a button in one of its columns. The button is supposed to toggle the class of the current row in the table and then replace itself once clicked. $(document).ready(function() { $(".checkOut"). ...

javascriptjqueryhtmlcss

JQuery AJAX click event not triggering

I'm currently working on a project to create a dynamic website where users can update text fields directly from the site. However, I've encountered an issue on the 'admin' page where nothing happens when the button is pressed to set the ...

htmljqueryajaxexpressejs

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...

javascriptjqueryhtmlcss

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

Our mobile application is built with cordova [phonegap] and we are looking to implement offline saving of results into the cache memory. The results are fetched from a PHP server and displayed in a webview using ajax and javascript. I have tried using loc ...

jqueryajaxhtmlcordovalocal-storage

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies if this has been asked before. H ...

javascripthtmlcsstwitter-bootstrap-3

Lines running horizontally on either side of the text

I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...

htmlcsswordpress

Primeng - Concealed dropdown values within a scrollable table header

Recently, I integrated Primeng p-table with a filter and frozen column feature (with one column being fixed while the others are movable). However, I encountered an issue with the select dropdown in the header. When I try to open the dropdown, the values a ...

javascriptcssangularprimengprimeng-turbotable

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Is it possible to ensure that row selection in a table is consistent in terms of border alignment on both sides? https://i.stack.imgur.com/qmZiQ.png If you have any suggestions or solutions, please share them. Thank you! table { margin: 10px; bord ...

htmlcsshtml-tableborder

Understanding the structure of html elements

Within my downloaded HTML files, I consistently have key executives mentioned at the beginning of each file (like "Dror Ben Asher" in the code snippet below): <DIV id=article_participants class="content_part hid"> <P>Redhill Biopharma Ltd. (NA ...

pythonhtmlbeautifulsouphtml-parsing

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap

Looking for assistance with troubleshooting CSS issues specifically in Internet Explorer

Hey there! I've been working on a landing page and it's looking good in Safari, Firefox, and Chrome. The only issue is that the layout is all messed up in IE (any version). If any of you experts could take a look at it and give me some suggesti ...

htmlcssinternet-explorer

Seeking particular section of online content in an asynchronous manner

Is there a method for asynchronously requesting a specific portion of a web resource (like the initial 100 bytes) using JavaScript? I believed this could be accomplished through XmlHttpRequest by adjusting its Range header. However, if the server utilizes ...

javascriptajaxhtmlhttpxmlhttprequest

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

javascriptjqueryhtmlajax

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

htmlcssmarginpadding

Create and dispatch a JSON POST request to a remote domain without direct server access

My current hurdle involves attempting a POST request in JSON to an external domain without having access to the server's files for modification. However, upon making the request, I encounter the following error: XMLHttpRequest cannot load . No & ...

jqueryhtmljsonajaxcross-domain

AngularJS function orderBy reverses the array instead of sorting it

I encountered an issue where, after clicking the 'order button', the table does not order as expected. Instead, it reverses all the td elements. For example, 'A', 'C', 'B' becomes 'B', 'C', "A". I ...

javascripthtmlangularjsangularjs-orderby

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

csstwitter-bootstrapresponsive-design

Unable to hide content in Shopify using @media

How can I hide a Facebook like button when the browser window is resized to a certain width? This is the code I am using: @media all and (max-width: 300px) { .fb-like { float: right; display: none; } } While this code works on regular websites, it do ...

cssmobilemedia-queriesdevice