CODEWITHSUNDEEP
htmlcss
Erick Gaiote
Erick Gaiote

Reputation: 23

Code with border wrapping strangely inside paragraph

I was writing a CSS for a simple page and I've stumbled across a problem. I have a style for code that makes it have a simple border. The problem is when the line wraps inside that code when it's inside a paragraph. For example, the code below:

<!DOCYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p { text-align: justify; }
    code { border: 1px solid black; border-radius: 3px; }
  </style>
</head>

<body>
  <p>
    Here I have a paragraph and a really long code text:
    <code>I'm a really long code text with a border.</code>
  </p>
</body>

</html>

It appears something like this.

When the line wraps inside the code element, the border stops in the first line and continues on the second incomplete at the break, which is kinda ugly. I'd like to make it so that the line can't wrap inside the code element as if this element is treated as a single word in a paragraph and appears entirely on the next line; or that the border stops when the line wraps and appears again when the next line starts. However, I have no idea of how to do this and I haven't found anything similar on the internet, can someone please help me?

Upvotes: 2

Views: 287

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You may use outline instead border :

p {
  text-align: justify;
}

code {
  outline: solid 1px;
}
<p>
  Here I have a paragraph and a really long code text:
  <code>I'm a really long code text with an outline border.</code>
</p>

Upvotes: 1

Евгений Иванов
Евгений Иванов

Reputation: 101

Fix for tag code

More info - https://www.w3schools.com/html/html_blocks.asp

code {display: inline-block)

Upvotes: 0

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

You can use display: inline-block or display: block on the code element

code {
  border: 1px solid black;
  display: inline-block;
}
<p>
  Here I have a paragraph and a really long code text:
  <code>I'm a really long code text with a border. I'm a really long code text with a border.</code>
</p>

Upvotes: 1

Related Questions