Solution 1 :

.safari-wrapping-fix {
    display: inline-block;
    white-space: nowrap;

Add the above css to a span element before your closing “p” tag. This solved the issue for us.


<p>Lorem Ipsum <span class="safari-wrapping-fix"></span></p>

Solution 2 :

I can confirm that it is a Safari issue.
I am running through a very similar issue on my own project.
When refreshing the browser, the layout will look correctly, it is only when I resize that notice the issue, also toggling between CSS properties inside the browser inspector will solve the issue instantly, only when I resize that the problem appears again.
And it is only happening for Safari 15 and Big Sur.

Problem :

Currently trying to switch between a 2 column paragraph to a single column paragraph when the browser window width is <769px and >1040px.
I’m using column-count to automatically split the text into 2 columns and it works consistently on Chrome and Firefox and almost as well on Safari.

While testing, I found a bug on Safari 14.1+ wherein if you resize the browser from >1040px to 768px, the div containing the text expands for some reason and when you resize it back to >1040px, the issue persists.

Here is an example code

    <meta name="viewport" content="width=device-width, initial-scale=1">
    .border {
        border: 1px solid red;
    @media only screen and (min-width: 769px){
        .columns-md {
            column-count: 2;
            column-gap: 2rem;
            min-height: initial;
    @media only screen and (min-width: 1041px) {
        .columns-off-lg {
            column-count: 1;
            column-gap: initial;
            min-height: 0;
    <div class="border">
        <div class="columns-md columns-off-lg">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

Other things I’ve noticed:

  1. Turning a style on/off through Safari’s web inspector seemingly fixes the issue but if you resize the browser horizontally again, other sections end up with the bug as well.
  2. Removing column-count eliminates the issue but then I don’t get the desired design.
  3. For when the issue appears <769px, it doesn’t occur between 769px and 1040px when the text is split and reappears when the text is in a single paragraph.
  4. The issue occurs ONLY when the browser width is >1040px and then resized down to <769px.
  5. Must refresh the page at >1040px to recreate the issue before resizing the browser.
  6. The issue doesn’t seem to be present on earlier versions of Safari, however, I’ve only tested on 13.1.

My machine is currently running Big Sur and Safari 14.1.

Any idea if this is just a Safari issue or my CSS?

P.S. I can also confirm others were able to recreate the the bug.


Comment posted by Shane D’Silva

We were able to fix the issue with word wrapping in css. I will post the code in a bit.

Comment posted by blsqr

@ShaneD’Silva How did you end up solving this issue?

Comment posted by Shane D’Silva

@blsqr I’ve posted the answer below for you. Hope it helps. 🙂