0

私は次の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>

「Loremimpsum」の長さが長い場合（9000シンボルを超える場合）、ブレークシンボルがなく、TDにラップおよびオーバーフローディレクティブがない場合でも、Operaブラウザはテキストのラップを開始します。

ここに画像の説明を入力してください

他の有名なブラウザはすべてうまくいきます：

ここに画像の説明を入力してください

可能性はOperaoverflow-y:hiddenでは動作しません。display:table-cell考えられる解決策は、を追加することdisplay:blockです.result_table table td。

デモ： http： //jsfiddle.net/qXjV8/

td別の解決策は、div内のテキストをラップし、セレクターを次のように変更することです。.result_table table td div

デモ： http： //jsfiddle.net/qXjV8/1/

どちらの場合も、次のようなリセットcssを使用することをお勧めします：http：//meyerweb.com/eric/tools/css/reset/

また、どちらの場合も、Operaの2行目が部分的に表示されていることに気付くでしょう。これを解決するには、line-heightプロパティを使用できます。

4

1 に答える 1

2

可能性はOperaoverflow-y:hiddenでは動作しません。display:table-cell考えられる解決策は、を追加することdisplay:blockです.result_table table td。

デモ： http： //jsfiddle.net/qXjV8/

td別の解決策は、div内のテキストをラップし、セレクターを次のように変更することです。.result_table table td div

デモ： http： //jsfiddle.net/qXjV8/1/

どちらの場合も、次のようなリセットcssを使用することをお勧めします：http：//meyerweb.com/eric/tools/css/reset/

また、どちらの場合も、Operaの2行目が部分的に表示されていることに気付くでしょう。これを解決するには、line-heightプロパティを使用できます。

于 2011-03-15T11:25:17.823 に答える