Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

CSS - how to disable line wrapping in HTML?

0 contributions
2 points

Using CSS it is possible to remove line wrapping in following ways.

Note: read this article how to disable world wrapping.

1. white-space: nowrap example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    p {
        border: 1px solid black;
        width: 200px;
        white-space: nowrap;
    }

  </style>
</head>
<body>
  <p>
    Very long web page text here: 1 2 3 4 5 ...
    Very long web page text here: 1 2 3 4 5 ...
  </p>
</body>
</html>

Note: use <br /> element to break lines.

2. white-space: pre example

This approach makes text behaving similar to pre tag - white characters in source code are visible on web page.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    p {
        border: 1px solid black;
        width: 200px;
        white-space: pre;
    }

  </style>
</head>
<body>
  <p>Very long web page text here: 1 2 3 4 5 ...
Very long web page text here: 1 2 3 4 5 ...</p>
</body>
</html>

Merged quastions

  1. CSS - how to turn off line wrapping in HTML?
  2. CSS - how to remove line wrapping in HTML?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more