•  24-10-2019
  •  | 
  •  

Pergunta

I have following 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>

when "Lorem impsum" has big length (more than 9000 symbols), Opera browser begins to wrap text, even though there is no break symbols and TD has nowrap and overflow directives.

enter image description here

other famous browser do all good:

enter image description here

Foi útil?

Solução

Possible overflow-y:hidden doesn't work with display:table-cell in Opera. O possible solution is to add display:block for .result_table table td.

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

Another solution could be to wrap the text within the td with a div and change the selector to .result_table table td div

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

In both cases I advice you to use a reset css like this: http://meyerweb.com/eric/tools/css/reset/

Also you will notice that in both cases the second line in Opera is partially visible. To solve this you can use line-height property.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top