DEV Community

Ben Halpern
Ben Halpern

Posted on

Safari is word-wrapping the pre tag, creating inappropriate code wrapping.

This is live on dev.to right now and I haven't been able to find the answer.

Here is a normal code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Authentication with firebase</title>
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js"></script>
    <style>
        #app{
        width:50%;
        margin: 100px auto;
        }
        .hide{
        display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="email" id="txtEmail" placeholder="Enter email" /> <br/>
        <input type="password" id="txtPassword" placeholder="Enter password" /><br/>
        <button id="btnLogin" >Log in</button>
        <button id="btnSignUp" >Sign Up</button>
        <button id="btnLogOut" class="hide" >Log Out</button>
        <button id="withFB">Log In with FaceBook</button>
        <button id="withGithub">Log In with GitHub</button>
    </div>  
    <div id="results"></div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

On Chrome it wraps as expected on narrow screens and scrolling sideways reveals the code. On safari, the pre is not acting like pre and it is creating wrapping. This makes the code less readable and is a bug.

(Code snippet copied from this post for no particular reason)

Can anyone play with this and help out? Thanks a lot. ❤️

Top comments (4)

Collapse
 
aurelkurtula profile image
aurel kurtula

Hi

It seems that the issue can be fixed by adding the following to the pre tag

overflow-wrap: normal

My Safari version is Version 11.0.2 (11604.4.7.1.4) on a mac

Collapse
 
kristof0425 profile image
Kristóf Dombi • Edited

Hello Ben!

I've come across your problem recently and these lines of css helped me out:

pre {
  white-space: nowrap;
  word-wrap: break-word;
  overflow: auto;
}

Let me know if it helped you!

Kristof

Collapse
 
pp profile image
Paweł Ludwiczak

You reported, I listened. Fix is coming.

Collapse
 
mangekalpesh profile image
Kalpesh Mange

IMO, people should just move on to real browsers ( ahem Chrome, Firefox ) that support features like Service Workers and proper pre tagging. 👶😶