Ópera Error de envoltura

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

  •  24-10-2019
  •  | 
  •  

Pregunta

Tengo siguiendo 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>

Cuando "Lorem Impsum" tiene una gran longitud (más de 9000 símbolos), el navegador de ópera comienza a envolver el texto, a pesar de que no hay símbolos de descanso y TD tiene directivas Nower y desbordamiento.

enter image description here

Otro navegador famoso haz todo bien:

enter image description here

¿Fue útil?

Solución

Posible overflow-y:hidden no funciona con display:table-cell en ópera. O La posible solución es agregar display:block por .result_table table td.

Manifestación: http://jsfiddle.net/qxjv8/

Otra solución podría ser envolver el texto dentro del td con un div y cambia el selector a .result_table table td div

Manifestación: http://jsfiddle.net/qxjv8/1/

En ambos casos, le aconsejo que use un CSS de reinicio como este: http://meyerweb.com/eric/tools/css/reset/

También notará que en ambos casos la segunda línea en Opera es parcialmente visible. Para resolver esto puedes usar line-height propiedad.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top