离开列表样式时删除 li 文本答案

【问题标题】：Remove li text while leaving list-style离开列表样式时删除 li 文本
【发布时间】：2011-07-26 19:25:36
【问题描述】：

我有一个使用缩进点的列表样式的无序列表。我想保留这些点，但从视图中删除文本。我最初猜想我可以简单地设置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;
}

【问题讨论】：

请给我们看看HTML和CSS！！！
为什么是作弊？如果你把颜色设为白色，那就是作弊。
作弊，因为屏幕阅读器对此无能为力。
@technopeasant ...他想要的只是点...为什么屏幕阅读会关心那里有什么？
因为它是页面上的一个元素..

标签： javascript jquery css styles

【解决方案1】：

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

.list_item { display: none; }

一些关于你为什么隐藏文本的上下文将有助于回答这个问题

【讨论】：

这是有道理的，并且允许将来取消隐藏文本。

【解决方案2】：

如何在带有 display:block 的列表项中使用 span，并在 span 上设置 text-indent？

【讨论】：

【解决方案3】：

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

这对你有帮助

【讨论】：

【解决方案4】：

您需要做的就是留一个空白<li></li>，这样会显示没有任何文字的点

【讨论】：

【解决方案5】：

我们需要知道你为什么想要这个...上下文...

您是否希望稍后发生一些使文本可见的事情？如果是这样，您应该将 <li> 中的所有文本放在 <span> 即 visibility:hidden 中，然后在希望它显示/读取时，您应该使其可见..

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

【讨论】：

【解决方案6】：

如果您真的不想将文本设置为&nbsp;，那么您可以使用wrapInner，如下所示：

试试这个：

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

【讨论】：