CSS Grid - unnecessary word break
up vote
2
down vote
favorite
I have a problem with CSS grid.
In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
Is there any property I have to or can use to solve this problem?
P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
css
![](http://i.stack.imgur.com/EdUwb.png)
add a comment |
up vote
2
down vote
favorite
I have a problem with CSS grid.
In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
Is there any property I have to or can use to solve this problem?
P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
css
![](http://i.stack.imgur.com/EdUwb.png)
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I have a problem with CSS grid.
In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
Is there any property I have to or can use to solve this problem?
P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
css
![](http://i.stack.imgur.com/EdUwb.png)
I have a problem with CSS grid.
In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
Is there any property I have to or can use to solve this problem?
P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin: 0 auto;
}
p {
word-break: break-word;
padding: 0 4%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
css
![](http://i.stack.imgur.com/EdUwb.png)
css
![](http://i.stack.imgur.com/EdUwb.png)
edited Nov 17 at 21:47
![](https://i.stack.imgur.com/WSmLn.png?s=32&g=1)
![](https://i.stack.imgur.com/WSmLn.png?s=32&g=1)
Temani Afif
61.7k93572
61.7k93572
asked Nov 17 at 21:22
Jakub Michálek
3,2991819
3,2991819
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33
add a comment |
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
It's not a bug but a complex calculation.
There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width1. At the end, we will reduce the calculated padding from the width creating the word break.
This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.
An easy fix is to use pixel value instead of percentage in case you know the value you want:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Why you don't see this on firefox?
Simply because break-word
is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1: The size of the padding as a percentage, relative to the width of the containing block.ref
add a comment |
up vote
0
down vote
You wrote:
Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
Well, actually, there is not enough space for the text. That's why the word break occurs.
You have set the left and right margins to auto
.
.item { margin: 0 auto; }
That causes the grid items to be horizontally centered and squeezed as much as possible.
By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word
(which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.
There is, however, a simple workaround that works across browsers (see below).
You wrote:
To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
I'm not sure this is a bug, or just a property value under consideration.
You wrote:
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
You don't need auto
margins to center the text.
You wrote:
Is there any property I have to or can use to solve this problem?
Yes. Use flex properties.
As explained above, the auto
margins squeeze the grid items as much as possible. With word-break: break-word
, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.
Here's what it looks like:
(But, why does the margin: 0 auto
–work-break: break-word
combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)
Here's a solution that may solve your overall problem:
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
More details: Centering in CSS Grid
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
It's not a bug but a complex calculation.
There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width1. At the end, we will reduce the calculated padding from the width creating the word break.
This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.
An easy fix is to use pixel value instead of percentage in case you know the value you want:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Why you don't see this on firefox?
Simply because break-word
is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1: The size of the padding as a percentage, relative to the width of the containing block.ref
add a comment |
up vote
2
down vote
accepted
It's not a bug but a complex calculation.
There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width1. At the end, we will reduce the calculated padding from the width creating the word break.
This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.
An easy fix is to use pixel value instead of percentage in case you know the value you want:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Why you don't see this on firefox?
Simply because break-word
is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1: The size of the padding as a percentage, relative to the width of the containing block.ref
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
It's not a bug but a complex calculation.
There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width1. At the end, we will reduce the calculated padding from the width creating the word break.
This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.
An easy fix is to use pixel value instead of percentage in case you know the value you want:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Why you don't see this on firefox?
Simply because break-word
is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1: The size of the padding as a percentage, relative to the width of the containing block.ref
It's not a bug but a complex calculation.
There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width1. At the end, we will reduce the calculated padding from the width creating the word break.
This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.
An easy fix is to use pixel value instead of percentage in case you know the value you want:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Why you don't see this on firefox?
Simply because break-word
is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1: The size of the padding as a percentage, relative to the width of the containing block.ref
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
edited Nov 30 at 21:36
answered Nov 17 at 21:45
![](https://i.stack.imgur.com/WSmLn.png?s=32&g=1)
![](https://i.stack.imgur.com/WSmLn.png?s=32&g=1)
Temani Afif
61.7k93572
61.7k93572
add a comment |
add a comment |
up vote
0
down vote
You wrote:
Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
Well, actually, there is not enough space for the text. That's why the word break occurs.
You have set the left and right margins to auto
.
.item { margin: 0 auto; }
That causes the grid items to be horizontally centered and squeezed as much as possible.
By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word
(which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.
There is, however, a simple workaround that works across browsers (see below).
You wrote:
To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
I'm not sure this is a bug, or just a property value under consideration.
You wrote:
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
You don't need auto
margins to center the text.
You wrote:
Is there any property I have to or can use to solve this problem?
Yes. Use flex properties.
As explained above, the auto
margins squeeze the grid items as much as possible. With word-break: break-word
, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.
Here's what it looks like:
(But, why does the margin: 0 auto
–work-break: break-word
combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)
Here's a solution that may solve your overall problem:
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
More details: Centering in CSS Grid
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
add a comment |
up vote
0
down vote
You wrote:
Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
Well, actually, there is not enough space for the text. That's why the word break occurs.
You have set the left and right margins to auto
.
.item { margin: 0 auto; }
That causes the grid items to be horizontally centered and squeezed as much as possible.
By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word
(which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.
There is, however, a simple workaround that works across browsers (see below).
You wrote:
To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
I'm not sure this is a bug, or just a property value under consideration.
You wrote:
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
You don't need auto
margins to center the text.
You wrote:
Is there any property I have to or can use to solve this problem?
Yes. Use flex properties.
As explained above, the auto
margins squeeze the grid items as much as possible. With word-break: break-word
, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.
Here's what it looks like:
(But, why does the margin: 0 auto
–work-break: break-word
combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)
Here's a solution that may solve your overall problem:
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
More details: Centering in CSS Grid
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
add a comment |
up vote
0
down vote
up vote
0
down vote
You wrote:
Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
Well, actually, there is not enough space for the text. That's why the word break occurs.
You have set the left and right margins to auto
.
.item { margin: 0 auto; }
That causes the grid items to be horizontally centered and squeezed as much as possible.
By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word
(which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.
There is, however, a simple workaround that works across browsers (see below).
You wrote:
To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
I'm not sure this is a bug, or just a property value under consideration.
You wrote:
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
You don't need auto
margins to center the text.
You wrote:
Is there any property I have to or can use to solve this problem?
Yes. Use flex properties.
As explained above, the auto
margins squeeze the grid items as much as possible. With word-break: break-word
, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.
Here's what it looks like:
(But, why does the margin: 0 auto
–work-break: break-word
combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)
Here's a solution that may solve your overall problem:
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
More details: Centering in CSS Grid
You wrote:
Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.
Well, actually, there is not enough space for the text. That's why the word break occurs.
You have set the left and right margins to auto
.
.item { margin: 0 auto; }
That causes the grid items to be horizontally centered and squeezed as much as possible.
By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word
(which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.
There is, however, a simple workaround that works across browsers (see below).
You wrote:
To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.
I'm not sure this is a bug, or just a property value under consideration.
You wrote:
Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.
You don't need auto
margins to center the text.
You wrote:
Is there any property I have to or can use to solve this problem?
Yes. Use flex properties.
As explained above, the auto
margins squeeze the grid items as much as possible. With word-break: break-word
, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.
Here's what it looks like:
(But, why does the margin: 0 auto
–work-break: break-word
combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)
Here's a solution that may solve your overall problem:
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
More details: Centering in CSS Grid
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
.grid {
display: grid;
grid-template-columns: auto;
border: 1px solid black;
padding: 2px; /* demo only */
}
.item {
/* margin: 0 auto; */
border: 1px dashed red;
}
p {
word-break: break-word;
padding: 0 4%;
/* new */
display: flex;
justify-content: center;
text-align: center;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>GRAND</p>
</div>
</div>
edited Nov 20 at 1:12
answered Nov 20 at 1:07
Michael_B
142k46225335
142k46225335
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
add a comment |
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
Just to comment on your answer: you can see in your demo that the red border stretch all the way to the edges of the container. This is not desirable in my case, both .item and .grid have a background set, this makes .grid`s background not visible. This is why margin is used to make the item takes as little space as possible.
– Jakub Michálek
Nov 30 at 19:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355708%2fcss-grid-unnecessary-word-break%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I tried removing property either break-work or padding and it worked fine on chrome.
– Ahmad Hassan
Nov 17 at 21:26
Yes indeed, but a) break-word is needed to prevent long strings (like URLs) from breaking out of the box and b) padding is needed as the content might have borders or background. There is a bigger picture, I created a snippet with the minimal setup that causes the strange behaviour - last letter break.
– Jakub Michálek
Nov 17 at 21:33