テーブルの内容を制限する方法（​​）

Question

私は時々変わるかもしれないテーブルのデータを持っています。ユーザーのコメントを入力します。コメントはデータベースに保存され、参照のためにhtmlテーブルに表示されます。ユーザーのコメントがあまりにも多く出るかもしれません。そのような時には、HTMLテーブルの高さと幅もすべてのデータを表示するために増加します。しかし、私は、上記の表で

<table> 
<th>id</th> 
<th>Comments</th> 
<th>User details</th> 
<tr> 
<td>1</td> 

<td>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 


<td>John smith</td> 
</tr> 
</table> 

たとえば、テーブル内のタグのための一定の高さと幅を与えたいと、データベースから取得されますユーザコメントの半分だけを表示...

コメント列は、その余分なテキストのために拡大されます。私はそれが1行または2行だけを表示するようにしたい

私はCSSでそれを行うことができますか？

Answer 1

あなたはそれを行うにラッパを追加する必要があります..あなたのチョイスすることができ代わりに、commを切り捨てるかもしれないサーバー側のページにロードされます。あなたは完全なコメントへのリンクで切り捨てられていることを示すためにエリプシスを追加することができます。これは単純にテキストの一部を隠すよりもユーザーフレンドリーになります。

Answer 2

max-widthとmax-heightと一緒に、overflow: hiddenに内容を割り当てるには、CSSを使用します。それはトリックを行う必要があります。

<td> 
    <div class="cont">Lorem ipsum dolor sit amet consectetuer adipiscing elit 
     Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit 
     sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla 
     odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus 
    </div> 
</td> 

をとCSS：

.cont { 
    overflow: hidden; 
    width: 300px; /* or other */ 
    -o-text-overflow: ellipsis; /* Opera */ 
     text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 3

書き込み

<td style="width: 300px;">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 

300ピクセルは

Answer 4

良く