我有下面的HTML结构,我想把点隐藏在td里面。限制是,我不能改变HTML。
td
<td>• <a href="">Link 1</a></td>
我试过使用JavaScript,但似乎不起作用
var str = $('.container table tbody tr td').html(); str.replace('• ', ''); $('.container table tbody tr td').html(str);
有没有一个纯CSS的方法来做到这一点?
xtfmy6hx1#
使用CSS,你可以用font-size“隐藏”文本,例如:
font-size
td { font-size: 0; } td a { font-size: 1rem; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>• <a href="">Link 1</a> </td> <td>• <a href="">Link 1</a> </td> <td>• <a href="">Link 1</a> </td> </tr> </table>
或者使用Jquery“删除”该文本节点,使用类似这样的方法:
$('td').html(function(){ return $(this).contents().slice(1); })
cngwdvgl2#
有志者事竟成。不知道为什么你的jQuery不起作用,但这里有一个只支持CSS的解决方案。请注意,您需要td和链接上的样式。点击“运行代码片段”来查看它的工作情况。
table tr:first-child td:first-child { position: relative; text-indent: -9999px; } table tr:first-child td:first-child a { position: absolute; text-indent: 0; top: 0; left: 0; }
<table border="1"> <tr> <td>• <a href="#">Link</a></td> <td>Text here</td> </tr> <tr> <td>Text here</td> <td>Text here</td> </tr> </table>
xiozqbni3#
// you may do something like this in pure css td { font-size: 0; } td a { font-size: 14px; }
6bc51xsx4#
您可以使用 content 和 attr中文(简体)
td:after { content: attr(data-text); width: max-content; height: 100%; }
对于隐藏文本,只需将此类添加到元素
td.hide-text:after { content: unset; }
或者您可以使用@media
@media
@media (min-width: 320px) and (max-width: 767px) { &:after { content: unset; } }
联系我们
<td data-text="your text"></td>
4条答案
按热度按时间xtfmy6hx1#
使用CSS,你可以用
font-size
“隐藏”文本,例如:或者使用Jquery“删除”该文本节点,使用类似这样的方法:
cngwdvgl2#
有志者事竟成。不知道为什么你的jQuery不起作用,但这里有一个只支持CSS的解决方案。请注意,您需要td和链接上的样式。点击“运行代码片段”来查看它的工作情况。
xiozqbni3#
6bc51xsx4#
您可以使用 content 和 attr
中文(简体)
对于隐藏文本,只需将此类添加到元素
或者您可以使用
@media
联系我们