Opera bug involucro

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

  •  24-10-2019
  •  | 
  •  

Domanda

Ho seguito 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>

quando "Lorem impsum" ha grande lunghezza (più di 9000 simboli), browser Opera comincia a disporre il testo, anche se non ci sono simboli di interruzione e TD ha nowrap e direttive di overflow.

entrare descrizione dell'immagine qui

altro browser famoso fare tutto bene:

entrare descrizione dell'immagine qui

È stato utile?

Soluzione

overflow-y:hidden Possibile non funziona con display:table-cell a Opera. possibile soluzione è quella di aggiungere O display:block per .result_table table td.

Demo: http://jsfiddle.net/qXjV8/

Un'altra soluzione potrebbe essere quella di avvolgere il testo all'interno del td con un div e cambiare il selettore a .result_table table td div

Demo: http://jsfiddle.net/qXjV8/1/

In entrambi i casi vi consiglio di usare un css ripristino come questo: http: // meyerweb .com / eric / strumenti / css / reset /

Inoltre si noterà che in entrambi i casi la seconda linea in Opera è parzialmente visibile. Per risolvere questo problema è possibile utilizzare la proprietà line-height.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top