EN
CSS - how to disable line wrapping in HTML?
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>