•  24-10-2019
  •  | 
  •  

Frage

Ich habe 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>

Wenn "Lorem Impsum" eine große Länge hat (mehr als 9000 Symbole), beginnt der Opernbrowser, Text zu wickeln, obwohl es keine Bruchsymbole gibt und TD nowrap- und Überlaufanweisungen hat.

enter image description here

Anderer berühmter Browser machen alles gut:

enter image description here

War es hilfreich?

Lösung

Möglich overflow-y:hidden funktioniert nicht mit display:table-cell in der Oper. O Eine mögliche Lösung ist hinzuzufügen display:block zum .result_table table td.

Demo: http://jsfiddle.net/qxjv8/

Eine andere Lösung könnte darin bestehen, den Text in den zu wickeln td mit einem Div und verändern den Selektor auf .result_table table td div

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

In beiden Fällen rate ich Ihnen, ein solches Reset -CSS zu verwenden: http://meyerweb.com/eric/tools/css/reset/

Sie werden auch feststellen, dass in beiden Fällen die zweite Linie in der Oper teilweise sichtbar ist. Um dies zu lösen, können Sie verwenden line-height Eigentum.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top