1

モバイル向けに設計された Web アプリを構築しようとしています。しかし、非常に大きなリンクがいくつかあります。私がしたいのは、テキストが収まらない場合はこれらの文字列を分割し、収まる場合は文字列全体を使用することです。

私は使用してみましたword-wrap:break-word：

.breakWord {
    width: 100% 
    word-wrap: break-word;
}

私のhtmlは次のとおりです。

<table>
  <tr>
   <td rowspan="2" style="width:10%" >picture</td>
   <td colspan="2" style="width:90%" class="breakWord">link</td>
  </tr> 
   <tr>
    <td style="width:80%">info1</td>
   <td style="width:10%">info2</td>
   </tr>
  <tr>
  </tr> 
</table>

このコードはページに収まりません - 水平スクロール バーが表示されます。

テキストを適切にするにはどうすればよいですか？

4

1 に答える 1

0

ソースのエラーを修正すると、機能します。

  • width:100%スタイルブロックからを削除します。のインラインスタイルと競合し、tdセミコロンがありません
  • colpanする必要がありますcolspan

tdまた、一部のブラウザは、幅スタイルのcolspannedに遭遇すると混乱する可能性があると思います。以下の2つはすでに幅を正しく設定しているstyle="width:90%"ので、を安全に削除できます。td

編集：
それで、それはどこでも機能しません。この質問への回答によると、問題はテーブルにあります。最初にテーブルの幅が計算され、次に画面で使用可能な幅ではなく、10％と90％が計算された幅として使用されます。
したがって、考えられる解決策は、テーブルに特定の幅を指定し、そのテーブルレイアウトを固定に設定することです。

<table style="width:100%; table-layout:fixed">
于 2012-06-11T06:51:40.537 に答える