2012-03-27 6 views
1

セル内に単語をラップしようとしています。 <td>は今、私はそれが次の行につまりを取得doestように、そのセル内のデータをラップしたい、などは50px専用の幅を持っていますセル内にデータをラップする

Column 1 
Some data 
wrapped 

必須:

Column 2 
Some da.. 

を私が知りたいですJavaScriptやCSSでも可能ですか?あなたがここにあなたのtd

td{width:50px;white-space:nowrap;}​ 

2回の表とexampleされているスタイルができCSSを使用して

+1

[あなたは何を試してみました?](のhttp:// mattgemmell。 com/2008/12/08/what-have-you-tried /) – j08691

+0

http://www.codinghorror.com/blog/2012/03/rubber-duck-problem-solving.html – vol7ron

答えて

3

他のいくつかのスタイルのルールと組み合わせて使用​​する場合これは、CSSでtext-overflowプロパティによって行うことができます。

CSS:

.wrappeddata { 
    width:   50px; 
    white-space: nowrap; 
    overflow:  hidden; 
    text-overflow: ellipsis; 
} 

width: 50pxは幅を定義します。

white-space: nowrap;は、ラッピングを防止します。

overflow: hidden;は、50pxの制限を超えて表示されなくなります。

text-overflow: ellipsis;はカットオフに置き換えとなります '...'

を、それを使用するには、単に:

<table> 
    <tr> 
     <td class='wrappeddata'>A block of text that is too long</td> 
    </tr> 
</table> 
0

+0

[text-overflow省略記号](http://www.quirksmode.org/css/textoverflow.html)。 –

1

プログラムでテキストを切り捨てるか、コンテナの正確な幅で切り取るだけですか?テキストを途切れさせたいのであれば、包含する要素にoverflow:hiddenを使用し、テキストを囲むタグにwhite-space:nowrapを使用することができます。

0

テキストオーバーフロー:省略記号(on)とオーバーフロー属性(すべてのブラウザで利用可能)を試してみてください。あなたはcssとjsでこれを純粋に行うのが難しいかもしれません。

「ドット」を印刷することは、クライアント側またはサーバー側で実現できます。しかし、テキストが50pxよりも幅が広いかどうかを確認するために何かを実装する必要があります。この条件が満たされている場合は、テキストを短くしてドットを追加する必要があります。

よろしく

0
<table> 
<tr><td width="40" style="word-break:break-all"> YOur.........Longgggggggggggggggggg Text 
</td></tr></table> 
関連する問題