Opera bug wrap

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

  •  24-10-2019
  •  | 
  •  

Question

Je suit 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 » a une grande longueur (plus de 9000 symboles), le navigateur Opera commence à envelopper le texte, même si il n'y a pas de symboles de rupture et TD a nowrap et directives de débordement.

entrer image description ici

autre célèbre navigateur toutes les bonnes:

entrer image description ici

Était-ce utile?

La solution

overflow-y:hidden possible ne fonctionne pas avec display:table-cell dans Opera. O solution possible est d'ajouter display:block pour .result_table table td.

Démo: http://jsfiddle.net/qXjV8/

Une autre solution pourrait consister à envelopper le texte dans le td avec un div et changer le sélecteur .result_table table td div

Démo: http://jsfiddle.net/qXjV8/1/

Dans les deux cas, je vous conseillons d'utiliser un autocommutateur comme Reset ceci: http: // meyerweb .com / eric / tools / css / reset /

vous remarquerez également que dans les deux cas, la deuxième ligne Opera est partiellement visible. Pour résoudre ce problème, vous pouvez utiliser la propriété de line-height.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top