文字在手机上不展开td元素

Question

我在尺码问题上需要一些帮助。如果您在桌面浏览器中查看以下代码，则会发现所有内容都按应有的大小调整。如果您尝试在移动设备 phone 上打开它（我已经用几部 iPhone 测试过它），td（白色带灰色边框）未正确调整大小。如果存在导致溢出的 span 元素，则 td 元素的大小调整正确。

div.highlighter-rouge {
  overflow-x: scroll;
}

div.highlight {
  width: 100%;
}

.highlight {
  display: inline-block;
}

.highlight {
  background-color: #eeeeee;
}

pre.highlight {
  margin-top: 0;
  margin-bottom: 0;
}

pre code {
  white-space: pre;
}

table {
  margin: 15px 0;
  padding: 0;
}

table {
  word-wrap: anywhere;
}

table tr {
  border-top: 1px solid #cccccc;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}

td.rouge-code>pre>span {
  display: inline-block;
}

.highlight .nt {
  color: #000080;
}

.highlight .s1 {
  color: #d01040;
}

html {
  -webkit-text-size-adjust: 100%;
}

<div class="language-bash highlighter-rouge">
  <div class="highlight">
    <pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
    </td>
    <td class="rouge-code">
      <pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
    </td>
    </tr>
    </tbody>
    </table</code>
    </pre>
  </div>
</div>

我现在已经尝试了很多东西，但我对此的了解程度只会导致反复试验。如果您真的不喜欢带表格的解决方案，我也可以创建一个没有表格但行为完全相同的版本。

https://codepen.io/ribbonCaptain/pen/GRrqgpE

Answer 1

.rouge-table td {
  vertical-align: top;
}
.rouge-table td pre {
  white-space: pre-wrap;
}

...会做到的。看看吧here.

没有much解释。

文字在手机上不展开td元素

Text is not expanding td elements on mobile phones

html

css

html-table

responsive-design