How do I wrap text in <code> tag HTML

In this article we will see how to wrap text in code tag in our html.

< code > tag in HTML is used to represent computer code. This is very helpful when you are writing a post for a programming blog.

The code tag have a fixed-width and browsers display it's content in monospace font.

Recently while working on a article, i came across a issue using code tag in mobile version of my website. Since it have a fixed-width, it exceeds the max-width of my mobile-device , and so i get a horizontal-scroll in my website.

So to fixed i have to use some CSS property to fixed the issue, if you facing the same issue just use the code below.

code{
  display: inline-block;
  white-space: normal;
  max-width:100%; 
  word-break:break-all; 
  word-wrap:break-word;
}

white-space : It handles the white space inside the code tag.

word-break : It handle how the word should break once it reach the end of the line.

word-wrap : It help to break long word and move to the next line.