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

Question

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

html css

Answer 1

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:

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

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:

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

Answer №2

give this a shot

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

Answer 4

give this a shot

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

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

Answer №1

Answer №2

Similar questions

Converting Data from MySQL and PHP to Excel

Proper syntax for jQuery's insertAfter() method when using selectors

Adding conditional href based on a specific criteria to an <a> tag in AngularJs

What is the best way to send an HTML form variable to a Perl script using AJAX?

Tips for adding additional rows or cells to a table with jQuery

HTML: Launch Frameset in a Separate Tab or Window

Tips for displaying a loading message during an AJAX request?

Using Jquery to generate a parent element programmatically and add multiple DOM elements inside it

What method can be used to effectively track markups within a string?

Risk Score Generating Form

You can interact with our dropdown menu using the tab key, even when it is

CSS not being applied to Next.js HTML pages

Having trouble with the filtering feature in Material UI Datagrid

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

What is the correct way to display a URL in Jupyter Lab?

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Guide for implementing smooth fade in and out effect for toggling text with button click

The event listener is failing to trigger the JavaScript function upon click

Encountering a glitch while iterating through function results in failure after the initial modification

Navigate to the top of the page using jQuery