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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:19 PM

テーブル内の 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

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

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

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

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

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

XML/HTML コード

123456789101112131415161718192021 222324252627282930313233343536373839404142434 4454647484950515253

UBL...
そうですね、内容が長すぎるかどうかを自動的に判断したいのですか。これについてはわかりませんが、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 を作成することもできます

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

See all articles