所以我最近遇到了一些奇怪的行为,我有一个表格,我希望它能够响应(当表格宽度超过屏幕宽度时显示滚动条)
但我不希望表格内的单元格变形,所以我尝试添加 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>
最佳答案
你刚刚拼错了。你需要的不是 text-nowarp
而是 text-nowrap
而不是 style="white-space:nowarp;
但 style="white -空间:nowrap;
关于html - 无法在表响应式 tbody 上禁用文字变形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49195036/