Question 304204 in Html Question posted in
Some basic documentation can be found here.

Html – Breaking text when it goes beyond the block

I’ve always had an issue where a text element simply doesn’t break when it goes beyond its parent element. I know that if I set, for example, max-width: 100px, then it will break, but that’s not practical. I want it to break only when it encounters 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;
}

I tried to set max-width: 100px, but it not responsible, i wanna find some of good solution. I want it to break only when it encounters the block.

https://phpout.com/wp-content/uploads/2023/12/KTxmR.png

Tags:

2

Answers


  1. 0

    you can try this

    .card-description {
    padding: 1rem;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    hyphens: auto; 
}
    Login or Signup to reply.
  2. 0

    The root of your problem is that grid items under certain conditions have a default min-width (and min-height) of auto. In this case, that is equal to the width of your text content. Refer to the spec for more details on this.

    If you set min-width: 0; on your grid items, you should be able to override that default and successfully set overflow-wrap: break-word; or word-wrap: break-word;.

    You can also set overflow: hidden; on your grid items (rather than the grid container, as you’re doing now). This should cause the browser to automatically set grid item min-width to 0 rather than auto (thus enabling the use of overflow-wrap: break-word; or word-wrap: break-word;).

    Just for the sake of completeness, there are a couple other potential solutions:

    1. Use overflow-wrap: anywhere; instead of overflow-wrap: break-word;. The difference between the two is that anywhere will force the browser to consider breakpoints ("soft wrap opportunities") when calculating the element’s intrinsic minimum content size. That is to say, it’s more aggressive, so you may get undesirable results if you use width: min-content; alongside it.

    2. Use word-break: break-all;. This is sort of an extreme solution because it will ignore other line break opportunities and wrap your text when it hits the end of its container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search