テーブル内の td コンテンツが長すぎるため、それを使用したいと考えています。。。 show_html/css

テーブル内の td コンテンツが長すぎるので、... を使用して表示したいです。キーポイント: マウスをクリックすると、その上にレイヤーが表示され、コンテンツ全体が表示されます。親愛なる兄弟姉妹の皆さん、助けてください！！！！！！！！！！！！

ディスカッション（解決策）への返信

本当のことを話しても無駄です、例を挙げてコメントを書いた方が良いです、ありがとう！！！！！！！！！！！

アイデアがあります。2 番目のポップアップメニューの方法を使用してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">table {	border: #CCC 1px solid;}td,th {	width: 120px;	border: 1px solid #999;}td:hover ul {	display: block;	}ul {	display: none;	border: 1px solid #999;	list-style: none;	margin: 0;	padding: 0;	position: absolute;	width: 120px;	background: #CCC;}</style></head><body><table>  <tr>    <th>标题一</th>    <th>标题二</th>  </tr>  <tr>    <td>内容一内容……      <ul>        <li>隐藏内容一</li>      </ul>    </td>    <td>内容二内……</td>  </tr>  <tr>    <td>内容三</td>    <td>内容四</td>  </tr></table></body></html>

ログイン後にコピー

アイデアがあります。2 番目のポップアップメニューの方法を使用してください

XML/HTML コード? 123456789101112131415161718 1920212223242526272829303132333435363738394041424344454647484950515253

<; ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit...

これはできません。つまり、コンテンツが長すぎると表示されます...マウスを移動...上にレイヤーが表示され、コンテンツ全体が表示されます。コンテンツが長くない場合は表示されません...そして、マウスを移動してもレイヤーはコンテンツの上に表示されません

アイデアがあります。2 番目のポップアップメニューの方法を使用してください

XML/HTML コードを使用してください。 1234567891011121314151617181920212223242526272829303132333435363738394 041424344454647 484950515253

判断が難しいのは、コンテンツが長くない（表示されない...）移動時にレイヤーが表示されないことです

2階のkxteb0ccからの返信を引用：二次ポップを使用するアイデアがあります-アップメニュー

XML/HTML コード

123456789101112131415161718192021 222324252627282930313233343536373839404142434 4454647484950515253

そうですね、内容が長すぎるかどうかを自動的に判断したいのですか。これについてはわかりませんが、JavaScript が必要だと思います...
4 階の quanlei1507053 からの引用返信:
2 階の kxteb0cc からの引用: アイデアがあります。二次ポップアップメニューメソッド

XML/HTML コード

1234567891011121314151617181920212223242526 27282930313233343536373839404142 4344454647484950515253

カーン。。。。。でも、ありがとう

CSS 属性を試してください
text-overflow:ellipsis;

それを取得するには、js を書くのが最善です~~~

display:block;/*ブロックレベルとして定義*/
overflow:hidden; / ※余分な部分は非表示となります。 */
white-space:nowrap;/*表示されていない箇所を省略記号で置き換えます...*/

text-overflow:ellipsis;/* IE をサポート */

-o-text-overflow: ellipsis; /* サポートOpera *
これは、冗長なコンテンツが一定の幅の範囲内で楕円を表示できるようにするだけですが、連続した英字や数字は許可されません。

あなたが挙げた 2 番目の質問は、マウスを上に置いて完全なコンテンツを表示するときにタイトルを使用するというものです。それでも理解できない場合は、私にプライベートメッセージを送ってください。デモを作成します

問題の解決に役立つ場合は、忘れずに投稿して感謝してください。ポイントを獲得するのは簡単ではありません。

マスター、解決しましたか？
コードを共有してください

<style type="text/css"> #test{  display:block;/*内联对象需加*/      width:100px;      word-break:keep-all;/* 不换行 */      white-space:nowrap;/* 不换行 */      overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */      text-overflow:ellipsis; }</style>

ログイン後にコピー

はその後ろに非表示にしたり表示したりできますが、問題はマウスを上に移動してマウスの右下隅にコンテンツを表示する方法です

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE><META http-equiv=Content-Type content="text/html; charset=gbk"></HEAD><style type="text/css"><!--table { table-layout: fixed; } td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}--></style></head><body><table width="300" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF"  <tr>    <td width="100" height="20">	<a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行">	<NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行	</NOBR>	</a>	</td>    <td width="100" height="20">	<a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行">	<NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行	</NOBR>	</a>	</td>    <td width="100"> </td>  </tr>    <tr>    <td width="100" height="20"><NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行</NOBR></td>    <td width="100"><NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行</NOBR></td>    <td width="100"> </td>  </tr></table></body></html>

ログイン後にコピー

はマウスを上に移動できるようになりました。コーナーでは、最初のセルと 2 番目のセルの例を示します。これが、後で同じ問題を抱えている人に役立つことを願っています。

概要... CSS の text-overflow:ellipsis; を通じて実現できるようになりました

さらに、title 属性を使用してコンテンツ全体を表示できるようになりました。例:

れーれー

これは非常に簡単ですが、実際には js を使用して実装します。td に値がない場合は、何文字表示する必要があります。そして、さらに多くの文字を使用します... は、たとえば、各 td に 6 文字を含めてから、... を使用して他の文字を表す必要があることを意味します (value.length>6?value.subString(0,6):値）を選択し、マウスを上に移動して「レイヤーを表示」を使用し、レイヤー上に必要なものを表示します。表示したい場合は、レイヤーに必要なものを保存し、ラベルを表示します。マウス移動イベントのレイヤー。各 TD に必要な場合は、各 TD でスパンタグを使用して各 TD の実際の値を保存すると、各 TD の実際の値は非表示になります。イベントがトリガーされた後、マウスを移動すると、非表示のスパンタグの値を表示するレイヤーに割り当て、レイヤーを表示して必要な機能を完成させます。、これにより、あなたが言及した状況が解決されるはずです。より良い方法がある場合は、投稿できます。

疑問符式に欠落している質問は何個ありますか...((value.length>6?(value.subString(0,6)+"..."):value))

疑問符式に欠落している質問は何個ありますか疑問符式 ..((value.length>6?(value.subString(0,6)+"..."):value))

これは 3 項式と呼ばれます。わかりました

それはただの名前です。鄧小平は、ネズミを捕まえることができるなら、黒猫でも白猫でも良い猫だと言いました。どう思いますか？ Wrap:
table{table-layout:fixed;} td{overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space:nowrap;}
このように、省略記号が表示されていますが、 td で省略された内容は実際に存在します。 jQuery のヒントプラグインを使用して表示することも、自分で js を作成することもできます

イケメン、なぜ私がそれを見てポイントを与えなかったのですか？