Question

情况：要获得我想要的布局，我需要使用表格和表格行。

问题：如果我的预标签位于表格中，则宽度变得疯狂，并且与文本内部一样宽，忽略溢出并打破宽度

如果您查看demo，您会在页面中看到第一个预装，并使用滚动条。第二个没有。我希望第二个像第一个一样行事，但无法弄清楚

HTML：

<div class="dummy1">
    <div class="dummy2">
        <div class="z"> <pre>the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog</pre>
        </div>
    </div>
</div>
<div class="dummyA">
    <div class="dummyB">
        <div class="z"> <pre>the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog the red fox jumped over the lazy dog</pre>
        </div>
    </div>
</div>

CSS：

.z {
    width: 100%;
    height:100px;
    background-color:grey;
    display: block;
}
.z pre {
    background-color: red;
    /*overflow: scrollbar;*/
    overflow: auto;
    width: auto;
}

Answer 1

添加

.dummyA {
    display: table;
    table-layout: fixed;
    width: 100%;
}

解决这个问题。

http://jsfiddle.net/tx3bwpn9/2/

默认情况下，表格的内容与其内容一样宽，只要width具有默认值table-layout，表格单元格就不会尊重auto声明。这就是您需要分配table-layout: fixed;。

的原因

Answer 2

table-layout的默认属性为 auto ，因此请使用 width：100％; table-layout：fixed; 在 .dummyA类中它将解决您的问题

查看解释：https://css-tricks.com/fixing-tables-long-strings/

Answer 3

嗨，请在css中更新你的第一行：

.dummyA {

}
.dummyB {

}

如果在显示器表内，预宽度太宽

3 个答案: