Есть блок с текстом. Как скрыть текст внутри этого блока?
<div class="el">Текст</div>
Есть несколько вариантов реализации скрытия текста:
Просто обернуть текст в блоке в span и скрыть его
.el > span {display: none;}
<div class="el"><span>Текст</span></div>
Установить элементу font-size: 0
. Но это способ работает не во всех старых браузерах
.el {font-size: 0}
<div class="el">Текст</div>
Установить text-indent: -9999px (или -999em);
или text-indent: -999em;
.el {
text-indent: -9999px; /*или -999em*/
white-space: nowrap;
}
<div class="el">Текст</div>
Вариант с использованием того же text-indent
, но только с определённым сочетанием стилей: text-indent: 100%; white-space: nowrap; overflow: hidden;
.el {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
<div class="el">Текст</div>
Вариант приближённый к скрытию. Во всяком случае текста не видно
.el {
font-size: 1px;
color: rgba(0, 0, 0, 0);
}
<div class="el">Текст</div>
Использовать нулевой шрифт. Т.е. специальный шрифт, в котором нет букв. К сожалению, я такого найти не смог
Использовал font-size:0;
таким образом скрыл текст
.list {
}
.list-item {
/* text-display: none; */
font-size:0;
width:200px;
height:20px;
background:green;
}
div {display: inline-block; width: 10px; height: 10px; background-color: red;}
<ul class="list">
<li class="list-item">Пункт 0</li>
<li class="list-item">Пункт 1<div></div>Продолжение</li>
<li class="list-item">Пункт 2</li>
<li class="list-item">Пункт 3</li>
</ul>
если важно, чтоб текст был но его не было видно - можно использовать:
color: rgba(0, 0, 0, 0);
.list-item {
visibility: none;
}
Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):
.block {
width:45px;
white-space:nowrap;
overflow:hidden
}
.block:hover {
width:110px;
transition:0.3s;
}
<div class="block">Видно Невидно</div>
css
.list-item {
content: none;
}
span
и скрыть нельзя?font-size: 0;
можно так :)