html - 无法在表响应式 tbody 上禁用文字变形

Question

所以我最近遇到了一些奇怪的行为，我有一个表格，我希望它能够响应(当表格宽度超过屏幕宽度时显示滚动条)

但我不希望表格内的单元格变形，所以我尝试添加 text-nowarp 只是简单地执行 white-space:nowarp;它适用于 thead 中的表头，但我不知道为什么它在 tbody 或 tr 或 td 中不起作用 甚至我在 td

中添加 span

这是我的一般代码

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr class="text-nowarp">
        <th>Lorem ipsum</th>
        <th>sit consectetu</th>
        <th>consectetur adipisicing</th>
        <th>adipisicing</th>
        <th>Lorem</th>
      </tr>
    </thead>
    <tbody class="text-nowarp" style="white-space:nowarp;"> 
      <tr>
        <td class="text-nowarp"><span class="text-nowarp" style="white-space:nowarp;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit exercitationem non quibusdam explicabo repellendus iure natus expedita, illum, possimus veritatis aspernatur inventore ad itaque. Eveniet consequatur cum modi nostrum animi?</span></td>

        <td class="text-nowarp" style="white-space:nowarp;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam deserunt earum ullam ea dolores rerum veniam eius voluptatum eligendi odio quis maxime, numquam laborum quaerat quo optio illum atque dolore.</td>

        <td class="text-nowarp" style="white-space:nowarp;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptates nobis vel veniam autem magni laborum placeat porro eum magnam fugit ipsum aliquam maxime beatae, omnis molestiae quasi nesciunt nemo?</td>

        <td class="text-nowarp" style="white-space:nowarp;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore a facere aliquid at id? Neque, rerum assumenda! Cumque officia voluptatum exercitationem impedit error, placeat labore. Aperiam, saepe. Impedit, eligendi nam?</td>

        <td class="text-nowarp" style="white-space:nowarp;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nobis eveniet quo asperiores aperiam! Sit beatae necessitatibus quae, explicabo quaerat blanditiis minima nulla iure voluptates dicta consectetur adipisci recusandae vel?</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你刚刚拼错了。你需要的不是 text-nowarp 而是 text-nowrap 而不是 style="white-space:nowarp; 但 style="white -空间:nowrap;