"word-break" does not work correctly in CSS Grid

558 Views Asked by Majonez.exe At 04 April 2025 at 12:07

I have a problem with CSS grid.

In a Firefox, when the width of the screen is reduced (eg to 600px), some elements on pages that uses CSS Grid do not support word-break value. They remain on the same line as they were.

I tried to add a display: inline-block but it didn't fix that.

That's the bug:

* {
box-sizing: border-box;
}

body {
margin: 0 0;
padding: 0 0;
}

.grid {
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
display: grid;
margin-right: auto;
margin-left: auto;
}

.item {
grid-area: one;
display: grid;
}

<div class="grid">
  <div class="item">
    <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p>
    <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p>
  </div>
</div>

Another example: link

word-break bug

Is there any property I have to or can use to solve this problem?

Original Q&A

There are 1 best solutions below

Kingsyard901 On 22 July 2020 at 09:36

You need to Wrap your text using CSS. You can check how it works on w3schools here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Example code copied from above page:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px; 
  border: 1px solid #000000;
}

div.a {
  word-wrap: normal;
}

div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<h2>word-wrap: normal (default):</h2>
<div class="a"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

<h2>word-wrap: break-word:</h2>
<div class="b"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

</body>
</html>

"word-break" does not work correctly in CSS Grid

There are 1 best solutions below

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in WORD-BREAK

Trending Questions

Popular # Hahtags

Popular Questions