Question

我有一个无序列表，列表样式使用缩进点。我想保留这些点但是从视图中删除文本。我原先猜测我可以简单地设置text-indent:-999px;，但也会删除点。

有什么建议吗？

我知道如果li内的文字设置为&nbsp，它会起作用，但这就像是作弊。

HTML

<div id="page_nav">
  <ul>
    <li class="showlink" id="show_one">PAGE ONE</li>
    <li class="showlink" id="show_two">PAGE TWO</li>
    <li class="showlink" id="show_three">PAGE THREE</li>
  </ul>
</div>

CSS

#page_nav ul{
    margin:0;
    display:block;
}
#page_nav li{
    width:15px;
    height:15px;
    margin:0 0 0 5px;
    float:left;
    font-size:3.5em;
}

Answer 1

<li><span class="list_item">Item</span></li>

.list_item { display: none; }

关于你隐藏文本的原因的一些背景将有助于回答问题

Answer 2

如果您确实不想将文字设置为 ，则可以使用wrapInner，如下所示：

试试这个：

    $(function(){
        $("li.showlink").wrapInner("<span style='display:none'></span>");
    });

Answer 3

如何在列表项目中使用display：block，并在span上设置text-indent？

Answer 4

$('li.your_style').each(function()
{
  $(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
});

这可以帮到你

Answer 5

您需要做的只是留空<li></li>，这将显示没有任何文字的点

Answer 6

我们需要知道你为什么要这样......背景......

哇你想要以后发生的事情使文本可见吗？如果是这样，您应该将<li>中的所有文字放在<span> visibility:hidden {{1}}中，然后希望它显示/读取，您应该将其显示出来。

如果您想保持点但丢失文字......您希望屏幕阅读器说什么？ “点？”..

在保留列表样式的同时删除li文本

6 个答案: