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 Browser начинает обертывать текст, даже если нет символов разрыва, а TD имеет директивы NowRap и переполнение.

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/

Также вы заметите, что в обоих случаях вторая линия в Opera частично видна. Чтобы решить это, вы можете использовать line-height имущество.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top