Удалить текст li при выходе из стиля списка

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

Нам нужно знать, зачем вам это ... контекст ...

Ты хочешь, чтобы что-то произошло позже, что делает текст видимым? Если это так, вы должны поместить весь текст в <li> в <span>, то есть visibility:hidden, тогда, когда вы хотите, чтобы он отображался / читался, вы должны сделать его видимым

Если вы хотите сохранить точку, но потерять текст ... что бы вы хотели, чтобы программа чтения с экрана сказала? "точка?" ..

Answer 3

Все, что вам нужно сделать, это оставить пустым <li></li>, и это будет отображать точки без текста

Answer 4

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

это может вам помочь

Answer 5

Как насчет использования диапазона внутри элемента списка с display: block и установки текстового отступа для диапазона?

Answer 6

Если вы действительно не хотите устанавливать текст на  , вы можете использовать wrapInner следующим образом:

Попробуйте это:

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