word-wrap not working in a CSS Grid item

Question

I have a paragraph text without line breaks. It is supposed to be wrapped to a new line if the width exceeds the width of the grid container. It works if the container is not a grid.

I tried the solution from Prevent content from expanding grid items but not working. A similar question word-wrap in a CSS grid seems to be using tables which is outdated and not recommended in HMTL5

JSFiddle: https://jsfiddle.net/bvtsan8a/23/

.container {
  display: grid;
  grid-template-rows: auto;
  width: 500px;
  background: lightsalmon;
  min-width: 0;
  min-height: 0;
  background:peru;
}
.child{
  padding:30px;
  margin:30px;
  width:100%;
  background:indigo;
}
.item{
  background:indianred;
  padding:30px;
  margin:30px;
  width:100%;
}
.item p {
  min-width: 0;
  min-height: 0;
  color:gold ;
  word-wrap: break-word;
  max-width: 100%;
}

<div class="container">
  <div class="child">
    <div class="item">
       <p>lolololololololololololololololololololololololololololololololololololololololololo
       lolololololololololololololo</p>
    </div>
  </div>
</div>

SpiderCode · Accepted Answer · 2018-03-09T05:45:25.823

22

Use style word-breaK:break-all as mentioned below:

.item p {
  min-width: 0;
  min-height: 0;
  color:gold ;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

JSFiddle

The reason is that word-wrap: break-word will only break the words. So if for an example, if your paragraph has multiple words and you want to break them then this style will be used. And here your text inside p itself is one word.

While word-break: break-all; is used when you want to break the word.

edited Mar 09 '18 at 05:45

answered Mar 09 '18 at 05:23

SpiderCode

10,062
2
22
42

It will be good, if you give the reason in your answer why this property is resolving the issue and not the previous one. – Suresh Ponnukalai Mar 09 '18 at 05:39
so you meant to say `word-wrap:break-word` won't break the single word. is that right?? – Suresh Ponnukalai Mar 09 '18 at 05:48
`So if for an example, if your paragraph has multiple words and you want to break them then this style will be used.` In that case no need of any property. it will work automatically. – Suresh Ponnukalai Mar 09 '18 at 05:51
Right. In most cases it will work automatically for `word-wrap`. But if you still want to break single word also then use `word-break` – SpiderCode Mar 09 '18 at 06:10
:) :) then why this fiddle is working with only `word-wrap:break-word` https://jsfiddle.net/bvtsan8a/47/ – Suresh Ponnukalai Mar 09 '18 at 10:23
@SureshPonnukalai Please check this for more clarification: https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/ – SpiderCode Mar 09 '18 at 10:39
I read the thread many times. that's why i asked the above questions :) – Suresh Ponnukalai Mar 09 '18 at 10:41

score 2 · Answer 2 · answered Mar 09 '18 at 06:35

try using word-break: break-word;

.container {
  display: grid;
  grid-template-rows: auto;
  width: 500px;
  background: lightsalmon;
  min-width: 0;
  min-height: 0;
  background:peru;
}
.child{
  padding:30px;
  margin:30px;
  background:indigo;
}

.item{
  background:indianred;
  padding:30px;
  margin:30px;
}

.item p {
  min-width: 0;
  min-height: 0;
  color:gold ;
  word-break: break-word;
  max-width: 100%;
}

<div class="container">
  <div class="child">
    <div class="item">
      <p> lolololololololololololololololololololololololololololololololololololololololololololololololololololololololo
      </p>
    </div>
  </div>
</div>

word-wrap not working in a CSS Grid item

2 Answers2