Break long words on small screens

Question

I have this line:

<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

That is part of a code element.

What I'm trying to do is to view the line on small screens (without horizontal scrolling).

I have tried to style both <pre> and <code> with the help of http://www.w3schools.com/css/css3_text_effects.asp - and still the line doesn't break!

code { 
  width: 90%;
  min-width: 200px;
  background-color: white;
  border: 1px solid black;
  margin: auto;
  font-size: 1rem;
  /* ... and now what? */
}

Answer 1

Using the overflow-wrap CSS property should fix your issue

code {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;

  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;

  /* Instead use this non-standard one: */
  word-break: break-word;
}