html - HTML 连接新行

问题描述

有没有办法让 HTML / CSS 只是扭曲同一行上的行？

<!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>

HTML CSS 给了我什么

我想要什么，而不必将所有内容写在一行中。

如果这是不可能的，我可以接受。

标签： htmlcss

从您的代码中删除white-space: pre-line，它将为您提供所需的输出。

因为当使用pre-line换行符时，在换行符处换行，在和处<br>，并根据需要填充行框。

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/white-space

还要添加padding-top: 10px;内容上方的空间（我在屏幕截图中发现了这一点）。

<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>

html - HTML 连接新行

问题描述

解决方案

推荐阅读