Question

我正在使用pre标记来显示项目的一些php和javascript代码，但是代码显示在包含元素的边界之外。在控制台中，我试图找到元素的宽度或容器div的宽度。在css文件中，父包装器div的宽度为100％，但某些包含元素的宽度要窄得多，但是在检查元素时，我在控制台中看不到它。 pre越过边界溢出，可以在此处看到：https://www.z1labs.com/

CSS

body {
    font:1.1em 'Source Sans Pro';
}

h1,
h2,
h3,
h4,
h5 {
    font-weight:400;
}

.hidden {
    display:none;
}

.wrapper {
    width:100%;
    max-width:600px;
    margin:0 auto;
}

.upload-console {
    background:#fefefe;
    border:2px solid #eee;
    padding:20px;
}

.upload-console-header {
    padding:0 0 20px 0;
    margin:0;
    border-bottom:2px solid #eee;
    font-weight:600;
    margin-bottom:20px;
}

.upload-console-drop {
    height:200px;
    border:2px dashed #ccc;
    line-height:200px;
    color:#ccc;
    text-align:center;
    margin-bottom:20px;
}

.upload-console-drop.drop {
    border-color:#222;
    color:#222;
}

.upload-console-body {
    margin-bottom:20px;
}

.bar {
    width:100%;
    background:#eee;
    padding:3px;
    border-radius:3px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
    box-sizing:border-box;
    margin-bottom:20px;
}

.bar-fill {
    height:30px;
    display:block;
    background:cornflowerblue;
    width:0;
    border-radius:3px;
    -webkit-transition:width 0.8s ease;
    transition:width 0.8s ease;
}

.bar-fill-text {
    color:#fff;
    line-height:30px;
    margin-left:5px;
}

.upload-console-upload {
    border-bottom:2px solid #ccc;
    margin-bottom:10px;
    padding-bottom:10px;
}

.upload-console-upload span {
    float:right;
}

pre {
    border: 1px solid black;
}

我看到元素在哪里得到宽度，如何将代码保留在pre标签内？谢谢。

Answer 1

只需在overflow-x: scroll;标签上添加pre

pre {
    border: 1px solid black;
    overflow-x: scroll;
}

Answer 2

在white-space: pre-wrap;标签上添加pre并正确添加formatting您的代码

pre {
    border: 1px solid black;
    white-space: pre-wrap;
}

Answer 3

为您的overflow: auto标签提供pre，以便将内容设置在边框内。

pre {
    overflow-x: auto;
}

如何查看继承的宽度并将数据保留在pre标记内

3 个答案: