HTML表のテキスト・ワード・ラップを作成する

データベースのデータが入った表があります。基本的なテーブルレイアウトのようなある：HTML表のテキスト・ワード・ラップを作成する

<table class="cssTable"> 
    <tr> 
    <td class="cssRowCell1">1.</td> 
    <td class="cssRowCell2">Data here</td> 
    </tr> 
</table>

問題は、データベースがそれにスペースのないテキストの長い行が含まれている場合、テキストがページに巻き付けされていないことであるとの右側から突き出ページ。

私は次のことをやってみましたし、これらのどれも働いた：

1は、CSSに以下を追加しました：

<td class="cssRowCell1" width="2%">1.</td> 
<td class="cssRowCell2" width="98%">Data here</td>

任意のアイデアを：

.cssRowCell2 
{ 
    min-width: 880px; 
    word-wrap: break-word; 
    overflow: hidden; 
}

2は、明示的なテーブルの幅を追加しようとしました。どのように見栄えを良くするには？

出典

2012-03-04 ahmd0

cssでこれを行う必要がありますか？または、それが表示される前にスクリプトで修正できますか（またはデータベースに保存される前に）。私はあなたがcssで単語を壊すことはできないと確信していますが、オーバーフローで非表示にすることはできますが、非表示とテキストオーバーフロー：省略記号。 javascriptはオプションですか？ – Rob

ええ、これを行う唯一の方法はASP.NETスクリプトですが、問題はサーバーでページの幅がわかっていて、改行を正しく挿入できないことです。 – ahmd0

私はあなたのCSSが何らかの形で適用されていないと思います。私は前に 'word-wrap：break-word'を使っていて、すべての現代のブラウザで動作するようにしました。他のものがなければ、 'overflow：hidden'は長い単語を切り捨てるべきです。 – jpsimons

white-spaceで遊んでみましたか？

出典

2012-03-04 21:44:32 jerone

私はホワイトスペースを試しました：プレラップ;長い文字列の前に新しい行を追加するだけです。 – ahmd0

あなたの質問をもう一度読み終えたら、あなたの問題はテーブルの幅であると思います。あなたのテーブルに幅を設定してみてください。オンラインの例が役に立ちます。 – jerone

これはちょうどいいライブラリです：それはHyphenatorと呼ばれています。）それはかなりよくコメントされているので、私はthis discussionをチェックアウトすることをお勧めします。ちょっと古い質問です。）

出典

2012-03-04 21:48:05 raina77ow

これまでのところ私にとっては唯一のことは、サーバー側のスクリプトにスペースを導入することです（しかし、そこに示したように）。しかし、ここでの問題は、各行のテキストがどのくらい広がっているかわからないことです。改行も悪く見えます。 – ahmd0

単語（ハイフネーションを許可する英語またはその他の言語）でオプションのハイフネーションポイントを指定するには、SOFT HYPHEN U + 00A0文字または同等のエンティティリファレンスを挿入します。

文字列（foo/bar/zapのような）にオプションの直接改行点を指定するには、W3Cの推奨事項で悩まされているマークアップ<wbr>を挿入します。

これらの信頼性の高い（不器用ですが）メソッドに加えて、CSS規則hyphens: autoと言語宣言のように、あまり頻繁ではない（より洗練された）メソッドも考えられます。

出典

2012-03-05 06:09:08

以下のコードを参考にしてください。私は、テーブルタグにstyle="table-layout:fixed"をだけを追加した

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%"> 
    <tr> 
    <td width="8%" class="cssRowCell1">1.</td> 
    <td width="92%" class="cssRowCell2">Data here 
    </td> 
    </tr> 
</table>

と幅100%を設定し、あなたが列に対して設定したいどのくらいの幅というあなたに完全に依存しています。

注： Cssは上記と同じです。

出典

2012-03-05 06:30:43 w3uiguru

テーブルセルスタイルシート「ワードラップ：ブレークワード」、テーブルレイアウト：固定をテーブルスタイルシートに追加します。それが動作します。

出典

2014-05-18 16:28:13

HTML表のテキスト・ワード・ラップを作成する

答えて

関連する問題