cari
Rumahhujung hadapan webhtml tutorialtable 里的td内容过长,我想用。。。显示_html/css_WEB-ITnose

table 里的td内容过长,我想用.....显示, 重点:我想鼠标点.....上面,然后上面出现一个图层来显示整个内容,各位大哥大姐,求助啊!!!!!!!!!!!!


回复讨论(解决方案)

道理说起没用,最好给个例子,  写上注释,谢了!!!!!!!!!!!

我倒是有一个思路,用二级弹出菜单的方法

<!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>

我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transit……


你这个不行,我的意思是 如果内容过长就显示.....,然后把鼠标移动.....上面就出现图层显示整个内容,如果内容不长,就不会出现....,鼠标移动上面内容上面也不会出现图层来显示

我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transit……
难点就是判断,不长的内容(也不会显示....)移动上面不会出现图层

引用 2 楼 kxteb0cc 的回复:我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBL……
呃,懂你意思了,你是想让它自动判断内容是否过长然后自动隐藏嘛,这个我就不晓得了,不过估计得用到javascript……

引用 4 楼 quanlei1507053 的回复:
引用 2 楼 kxteb0cc 的回复:我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

汗。。。。。不过还是谢谢你

试一试css属性
text-overflow:ellipsis;

最好写段js搞定她~~~

display:block;/*定义为块级*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis;    /* 支持 Opera *
这只是 让多余的 内容再 一定的宽度范围内 显示省略号,但是连续的英文字母跟数字不行。
再你说的第二个问题就是 鼠标放上去显示完整的内容这个 用title吧。如果还有不懂的可以给我发私信 我做个 demo 给你 

如果能帮助你 解决问题 记得 结贴 谢谢 赚点积分真不容易啊 。

撸主,解决了么?
求分享代码啊

<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>
现在可以实现鼠标移上去在右下方显示了,例子为第一个和第二个单元格,希望对你和后面一样问题的人又帮助。

关于......现在可以通过CSS来实现了,text-overflow:ellipsis;
另外显示整个内容可以使用 title 属性。比如:

<a href="#" target="_blank" title="这里显示完整的内容">内容</a>

这个很简单的,我给个思路吧,不过我是用js实现,其实用个问号表达式就可以了,当你没有td里面的值需要显示多少个字符,然后多的字符就用...表示,打比方你需要每个td里面过了6个字符然后其它的用...表示,(value.length>6?value.subString(0,6):value),然后你鼠标移上去用显示一个图层,然后图层上显示你需要的东西,你可以把图层里面需要的东西,用一个隐藏的图层标签保存,要显示的时候在一个鼠标移入事件中直接显示这个图层就可以了,如果是每个td都需要的话,那么你将在每个td中用一个span标签里面存放各个td的实际值都将隐藏起来,当你鼠标移入的时候事件激发之后你直接获取对应td里面的隐藏span标签里面值赋给要显示的图层里面,然后将图层显示出来就可以完成你要的功能了,你试试看,这样应该能解决你说的情况,如果有跟好的方法可以贴出来。

问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))

问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))

这叫三元表达式 好么



这叫三元表达式 好么

叫法不一样而已,邓小平说过黑猫白猫能抓住老鼠就是好猫,你说呢

table强制不换行:
table{table-layout:fixed;} td{overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space:nowrap;} 
这样,虽然显示出了省略号,但是td中省略掉的内容是实际存在的,你可以用一些jQuery tip插件来显示出来,也可以自己写js

帅哥,咋就没有看到给点分呢,意思下也行啊

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apakah tag root dalam dokumen HTML?Apakah tag root dalam dokumen HTML?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levelementthatencapsulatesallotherContent, memastikanproperdocumentstructureandbrowserparsing.

Adakah tag dan elemen HTML perkara yang sama?Adakah tag dan elemen HTML perkara yang sama?Apr 28, 2025 pm 05:44 PM

Artikel ini menerangkan bahawa tag HTML adalah penanda sintaks yang digunakan untuk menentukan unsur -unsur, manakala unsur -unsur adalah unit lengkap termasuk tag dan kandungan. Mereka bekerjasama untuk menyusun laman web.Character Count: 159

Apakah kepentingan & lt; kepala & gt; dan & lt; body & gt; Tag dalam html?Apakah kepentingan & lt; kepala & gt; dan & lt; body & gt; Tag dalam html?Apr 28, 2025 pm 05:43 PM

Artikel ini membincangkan peranan & lt; kepala & gt; dan & lt; body & gt; Tag dalam HTML, kesannya terhadap pengalaman pengguna, dan implikasi SEO. Penstrukturan yang betul meningkatkan fungsi laman web dan pengoptimuman enjin carian.

Apakah perbezaan antara & lt; strong & gt;, & lt; b & gt; tags dan & lt; em & gt;, & lt; i & gt; Tags?Apakah perbezaan antara & lt; strong & gt;, & lt; b & gt; tags dan & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

Artikel ini membincangkan perbezaan antara tag HTML ,, dan, memberi tumpuan kepada kegunaan semantik dan presentasi mereka dan kesannya terhadap SEO dan kebolehaksesan.

Sila jelaskan bagaimana untuk menunjukkan set aksara yang digunakan oleh dokumen dalam HTML?Sila jelaskan bagaimana untuk menunjukkan set aksara yang digunakan oleh dokumen dalam HTML?Apr 28, 2025 pm 05:41 PM

Artikel membincangkan menentukan pengekodan aksara dalam HTML, memberi tumpuan kepada UTF-8. Isu Utama: Memastikan paparan teks yang betul, menghalang watak -watak yang dihiasi, dan meningkatkan SEO dan kebolehcapaian.

Apakah pelbagai tag pemformatan dalam html?Apakah pelbagai tag pemformatan dalam html?Apr 28, 2025 pm 05:39 PM

Artikel ini membincangkan pelbagai tag pemformatan HTML yang digunakan untuk penstrukturan dan gaya web kandungan, menekankan kesannya pada penampilan teks dan kepentingan tag semantik untuk akses dan SEO.

Apakah perbezaan antara atribut 'ID' dan atribut 'kelas' elemen HTML?Apakah perbezaan antara atribut 'ID' dan atribut 'kelas' elemen HTML?Apr 28, 2025 pm 05:39 PM

Artikel ini membincangkan perbezaan antara atribut 'ID' dan 'kelas' HTML, yang memberi tumpuan kepada keunikan, tujuan, sintaks CSS, dan kekhususan mereka. Ia menerangkan bagaimana penggunaan penggunaannya mempengaruhi gaya dan fungsi laman web, dan menyediakan amalan terbaik untuk

Apakah atribut 'kelas' dalam HTML?Apakah atribut 'kelas' dalam HTML?Apr 28, 2025 pm 05:37 PM

Artikel ini menerangkan peranan atribut kelas HTML 'dalam kumpulan penggabungan untuk gaya dan manipulasi JavaScript, membezakannya dengan atribut' ID 'yang unik.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa