CODEWITHSUNDEEP
phpcssword-wrap
A. Meshu
A. Meshu

Reputation: 4148

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

Upvotes: 1

Views: 1945

Answers (3)

happymacarts
happymacarts

Reputation: 2604

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;
}

Upvotes: 3

dckuehn
dckuehn

Reputation: 2475

code {
    overflow-wrap: break-word;
}

From Mozzila Dev documentation

This is working on:

  • Google Chrome 4.0+
  • Microsoft Edge 5.5+
  • Firefox Mozzila 3.5+
  • Safari 3.1+
  • Opera 10.5+

Upvotes: 0

Stefan B&#252;rscher
Stefan B&#252;rscher

Reputation: 123

All that you need is to add: word-wrap: break-word;
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Upvotes: 1

Related Questions