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

Html – CSS Grid Bug with long words in Safari Browser

I have two examples for a card with two columns of the same width.
The upper card is implemented with flexbox. The lower card with grid.
In Safari, however, the grid example pushes the left column to the width of the word.

Only when I add word-break: break-word;, the word is wrapped.
Why does the Safari handle the breaks differently? Is there a workaround?

.wrapper {
  width: 600px;
}

.flexcard {
  background-color: #e7e7e7;
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
}

.flexcard > * {
    width: 50%;
}

.gridcard {
  background-color: #e7e7e7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
}

h2 {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 3rem;
}

.safari-fix {
  word-break: break-word;
}
<div class="wrapper" lang="de">
  <div class="flexcard">
    <h2>Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="gridcard">
    <h2>Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="gridcard">
    <h2 class="safari-fix">Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Instead of using "word-break: break-word;" you can use "text-overflow property"
    which is clipped the text and display an ellipsis (…) Or you can simply use custom string. (If you don’t want ellipsis)

        white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    Login or Signup to reply.
  2. 0

    Just tested in Safari and one simple fix would be to change your grid-template-columns like so:

    .gridcard {
  background-color: #e7e7e7;
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: 1rem;
}

    Or better yet change it to grid-template-columns: repeat(2, 50%) and it’ll be easier to maintain if you need to change the number of columns in the future.

    As to why, I’m not sure. Could be a bug in Safari related to grids or frs or -webkit-hyphens, could be Safari interpreting a vague CSS specification in a way that no other browser does. Both happen reasonably often lol. If anyone knows specifically why, please comment and I’ll update my answer.

    That said, it would also be fine to just use word-break: break-word if that makes things work.

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

Back To Top
Search