A. Meshu A. Meshu - 2 months ago 4
CSS Question

Break long words on small screens

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
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? */


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;