html如何实现一行文字过长超出div最后渐隐的效果

Posted 2023-03-15

参考技术A 你说的是隐藏吗？ 还是实现省略？ 如果是隐藏 直接对div设置长度 然后overflow:hidden;
如果是省略 可以看下这个http://www.jb51.net/css/69034.html追问

不是加省略号，是像浏览器打开的窗口过多时字不能显示全的那种效果

是隐藏，到最后一个字有渐隐的效果那样的

追答

那个就是省略 表示显示不下 你看下上面的那个链接

参考技术B 可以实现省略号，但如果是渐隐，估计得用上层遮盖才行。追问

用上层遮盖怎么实现，不是过长隐藏，最后一个字要有渐隐的效果，就是应用列表，有关应用介绍的文字最后渐隐的效果

追答

如果文字几乎是不变的，可以使用：字，如果是后面多个字要实现渐隐，可以字字字

追问

不是不变的肿么办？根据div的宽度，宽度在不同的手机里是不同的

追答

你的意思应该是超出前最后几个字慢慢变淡，逐渐消失吧？
知识浅薄，没能想出解决办法。

追问

用右面div的边框阴影可以达到效果。

本回答被提问者采纳

如何将<td>文字过长的部分,变成省略号显示

我用Html的Table显示数据,
控制<td>里的显示

将<td>文字过长的部分,变成省略号显示方法如下：
在设置文字过长部分需要用到text-overflow标签，设置为 ellipsis，意思为文本超出部分为省略号；
同设置整体为本过长需要用white-space标签，设置为 nowrap，意思是文本不换行；
同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden;
整体设置标签为：td text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 参考技术A 用css.
overflow: hidden; text-overflow:ellipsis本回答被提问者采纳 参考技术B

你是否使用响应式的Bootstrap,如果使用！请直接复制以下代码即可

table
 table-layout:fixed;

.table tbody tr td
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 

参考技术C

参考一下这篇博客

通过增加列Class直接修饰td、th，首先定义一个文本超长自动省略的CSS Class

http://www.zhuyuan.tech/articles/7

Datatables 文字过长CSS省略