Opera 包装错误

StackOverflow https://stackoverflow.com/questions/5309955

  •  24-10-2019
  •  | 
  •  

题

我遵循HTML/CSS：

<html>
<body>
<style type='text/css'>
.result_table table {
  border-collapse:collapse;
}
.result_table table td {
  white-space:nowrap;
  max-width:200px;
  overflow:hidden;
  padding:4px;
  max-height:24px;
  height:24px;
}
</style>
<div class="result_table">
 <table border=1><thead><tr><td>Title</td></tr></thead>
  <tbody>
   <tr>
    <td>Lorem ipsum dolor sit amet, ...</td>
   </tr>
  </tbody>
 </table>
</div>
</body>
</html>

当“ Lorem Impsum”的长度很大（超过9000个符号）时，Opera浏览器开始包装文本，即使没有中断符号，TD具有NOWRAP和OVERFLOW指令。

enter image description here

其他著名的浏览器会做得很好：

enter image description here

有帮助吗？

解决方案

可能的 overflow-y:hidden 不使用 display:table-cell 在歌剧中。 o可能的解决方案是添加 display:block 为了 .result_table table td.

演示： http://jsfiddle.net/qxjv8/

另一个解决方案可能是将文本包裹在 td 使用DIV并将选择器更改为 .result_table table td div

演示： http://jsfiddle.net/qxjv8/1/

在这两种情况下，我都建议您使用这样的重置CSS： http://meyerweb.com/eric/tools/css/reset/

您还会注意到，在这两种情况下，歌剧中的第二行都是部分可见的。为了解决这个问题，您可以使用 line-height 财产。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top