html - 自定义 行为

Question

我正在尝试格式化 pre 元素以遵循这两种行为，但不知道该怎么做:

1. 如果 pre 元素的宽度小于其容器的设置宽度，则将其相对于其容器水平对齐。
2. 如果pre元素的宽度大于其容器的设置宽度，则设置pre元素的overflow-x为滚动使得滚动在 pre 元素本身上而不是在容器上。

以下内容:

• 案例 1 是规则 1 的示例。
• 案例 2 是规则 2 的示例。
• 案例 3 是结合案例 1 和案例 2 的尝试，但卷轴设置在容器，而不是 pre 元素。

body {
  background: cyan;
}

.c1, .c3 {
  text-align: center;
}

pre[class^='case'] {
  background: lightgreen;
}

.case1 {
  text-align: initial;
  display: inline-block;
}

.case2 {
  overflow-x: scroll;
}

.case3 {
  text-align: initial;
  display: inline-block;
  overflow-x: scroll;
}

<div class='c1'>
  <pre class='case1'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1
  </pre>
</div>

<div class='c2'>
  <pre class='case2'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1       testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </pre>
</div>

<div class='c3'>
  <pre class='case3'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1       testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </pre>
</div>

作为替代方案，如果可以将 pre 元素的内容水平居中，这也可以。

Answer 1

这应该可以解决问题:

pre {
  display: inline-block;
  text-align: initial;
  max-width: 100%;
  overflow-x: auto;
}

应用于您的代码段:

body {
  background: cyan;
}

.c1, .c3 {
  text-align: center;
}

pre[class^='case'] {
  background: lightgreen;
}

pre {
  display: inline-block;
  text-align: initial;
  max-width: 100%;
  overflow-x: auto;
}

<div class='c1'>
  <pre class='case1'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1
  </pre>
</div>

<div class='c2'>
  <pre class='case2'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1       testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </pre>
</div>

<div class='c3'>
  <pre class='case3'>
          1
        1   1
      1   1   1 
    1   2   1   1
  1   2   2   1   1
1   3   3   2   1   1       testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </pre>
</div>