Html CSS：预标记使卡片大小大于容器_Html_Css

Html CSS：预标记使卡片大小大于容器

html css

Html CSS：预标记使卡片大小大于容器,html,css,Html,Css,我有一张卡片，里面有一个预标签。问题是，由于预标记，卡的大小变得比容器大，因此我的网页上有一个水平滚动条。如果内容大小大于卡片大小，我应该如何使预标记滚动？就像stackoverflow ansers上的代码片段一样。它们永远不会水平伸出页面，在代码段中会出现一个水平滚动条 CSS: HTML: 文件标题洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这是一个非常重要的问题，是不是所有人都有权享有共和国的特殊地位？是否有临时性的实验室检查？发明者veniam vero quaerat po

我有一张卡片，里面有一个预标签。问题是，由于预标记，卡的大小变得比容器大，因此我的网页上有一个水平滚动条。如果内容大小大于卡片大小，我应该如何使预标记滚动？就像stackoverflow ansers上的代码片段一样。它们永远不会水平伸出页面，在代码段中会出现一个水平滚动条

CSS:

HTML:


文件
标题

洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这是一个非常重要的问题，是不是所有人都有权享有共和国的特殊地位？是否有临时性的实验室检查？发明者veniam vero quaerat possimus，id magni Concertetur，omnis obcaecati recussandae ipsam。

我的同僚们都是精英。罪过发生在不久的将来，即身体是一种排斥物，是发明者的罪魁祸首。颞肌？

任何帮助都将不胜感激。

“pre”元素中的文本以固定宽度字体显示，文本保留空格和换行符。文本将完全按照HTML源代码中的文字显示

如果您希望具有该效果，而不是“pre”标记，请放置以下内容：


我的同僚们都是精英。过失
发明者之家的尸体
累积最小最大误差iusto obcaecati
大财团。颞肌？Lorem ipsum dolor sit amet
阿迪皮斯精英。体罚
他是一位伟大的发明家
最大最小误差iusto obcaecati CONSEQUOTUR FUGIA magnam。
颞肌？

您要查找的是

空白：pre-wrap

属性：

pre{
空白：预包装；
}

它保留了

的默认行为，因此保留了多个空格和新行，但是如果内容对于父级来说太宽，它会被包装。

如果您不想要pre的行为，为什么会是

？我想要它，因为我想在其中添加代码。在这里，我刚刚添加了lorem以加快速度，否则会有实际的代码。@MeetShah好的，明白了，请看一下我的答案。你救了我一天，机器人，非常感谢。顺便说一句，我从哪里可以学到这个空白的概念？它只是许多CSS属性中的一个，我喜欢读developer.mozilla.org来了解这些东西。

nowrap

将把所有东西都渲染成一行，我不认为这是重点。对不起，Bartosz，这不起作用。我只是想帮忙，以为他只需要一行。我编辑了我的帖子，也许这对你有用？但Robo已经回答了，所以没有必要：）嘿Roho，它正在包装内容，如果它比屏幕大，我可以用滚动的东西代替包装吗？是的，设置高度并添加

overflow-x:auto

。问题是，你想水平滚动吗？请记住，让内容水平滚动是一种糟糕的用户体验。不，就像stackoverflow一样。stackoverflow上的代码段，如果比scree宽，它将有一个水平滚动条。

.main {
    width: 100%;
    background-color: green;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: flex-start;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
.menu {
    width: 200px;
    height: 300px;
    background-color: red;
    flex-grow: 0;
    flex-shrink: 0;
}
.card-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: blue;
    height: 500px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.card {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: 20px;
    background-color: yellow;
    max-width: auto; height: 300px;
}
pre {
    background-color: black;
    color: white;
    overflow: scroll;
}

<!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">
    <link rel="stylesheet" href="flex-style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="menu"></div>
        <div class="card-container">
            <div class="card">
                <h1 class="heading">Heading</h1>
                <p class="paragraph">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste quaerat earum cum dolore saepe eius dignissimos porro, natus ut omnis maiores deleniti repudiandae distinctio quod? Vero tempore laboriosam maxime quidem accusantium ea qui enim doloremque? Maxime accusantium fuga inventore veniam vero quaerat possimus, id magni consectetur, omnis obcaecati recusandae ipsam.
                </p>
                <pre>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa placeat quia cum, corporis amet quas repellat, nostrum inventore numquam accusamus possimus minima maxime error iusto obcaecati consequuntur fugiat magnam. Temporibus?
                </pre>
            </div>
        </div>
    </div>
</body>
</html>


          <div
            class="container-outer"
            style="
              overflow: scroll;
              overflow-y: hidden;
              width: 350px;
              height: 210px;
            "
          >
              <div class="container-inner" style="width: 500px">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
                placeat quia cum, corporis amet quas repellat, nostrum inventore
                numquam accusamus possimus minima maxime error iusto obcaecati
                consequuntur fugiat magnam. Temporibus? Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Culpa placeat quia cum, corporis
                amet quas repellat, nostrum inventore numquam accusamus possimus
                minima maxime error iusto obcaecati consequuntur fugiat magnam.
                Temporibus?
              </div>
          </div>