HTML Concatenate New Lines-CodePudding

Is there a way to be able to have HTML / CSS just warp the lines on the same line?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style> 
    .MYDIV {
        overflow-x: auto;
        white-space: pre-line;
        border: 1px solid #cccccc;
        height: auto;
        width: 320px;
    }
</style>
<body>
    <div class="MYDIV">
     Look I really just want to be able to write this like this in html. 
     And have this be on the same line in the browser and wrap. I know
     it's weird but it would make my life easier.
    </div>
</body>
</html>

What the HTML CSS gives me

What I want without having to write everything in one line.

If this is imposable I can accept that.

CodePudding user response：

Remove white-space: pre-line from your code and it will give you the desired output.

Because when using pre-line lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Also add padding-top: 10px; for the space above the content (I spotted this on the screenshot).

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style> 
    .MYDIV {
        overflow-x: auto;
        /*white-space: pre-line;*/
        border: 1px solid #cccccc;
        height: auto;
        width: 320px;
    }
</style>
<body>
    <div class="MYDIV">
     Look I really just want to be able to write this like this in html. 
     And have this be on the same line in the browser and wrap. I know
     it's weird but it would make my life easier.
    </div>
</body>
</html>

CodePudding user response：

The solution has already been given, I just want to mention one thing. It's always a good practise to use a paragraph tag for this sort of writing. That will adjust many issues by itself.

So remove white-space: pre-line; and use

<p class="MYDIV">
Look I really just want to be able to write this like this in html. 
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</p>

This is surely a good practise to write HTML codes.