Скрыть весь текст, кроме первой буквы с CSS?

Question

Можно ли скрыть все буквы после первой буквы с помощью CSS?

dt:not(::first-letter) { 
    display: none; 
} 

Answer 1

Вы можете, но ваш CSS неверен. Следующая версия работает (по крайней мере, в Chrome). Это делает невидимым dt и определяет превышение первой буквы, чтобы сделать ее видимой снова.

Я тоже пробовал то же самое с display, но это не работает, как и ожидалось. visibility: hidden скрывает содержимое, но сохраняет элемент на месте, а display: none удаляет его из потока и делает невозможным повторное видимость субэлементов (первая буква в этом случае).

Я добавил также зависание, чтобы вы могли навести письмо, чтобы увидеть остальную часть dt.

dt { 
 
    visibility: hidden; 
 
} 
 
dt::first-letter { 
 
    visibility: visible; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    visibility: visible; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

Побочным эффектом будет то, что область, которая покрыта текст по-прежнему востребован. Возможно, это не проблема, но если это вам, вам понадобится другое решение. Одна из возможностей - сделать шрифт размером dt0. Таким образом, текст настолько мал, что не требует места. Не поможет, если он также содержит изображения, конечно.

Поскольку это не работает, вот альтернатива, использующая шрифт. Меньше идеала, но, надеюсь, он все равно решит вашу проблему.

dt { 
 
    font-size: 0; 
 
} 
 
dt::first-letter { 
 
    font-size: 1rem; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    font-size: 1em; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

Answer 2

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

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    /*color: transparent;*/ 
 
font-size: 0px; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    color: transparent; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

Answer 3

Я думаю, что вы с попробовать это:

.twitter{ 
 
     display: block; 
 
     color: transparent; 
 
    } 
 

 
    .twitter:first-letter{ 
 
     color: #000; 
 
    }

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div> 
 
<div id="socialMedia"> 
 
    <a class="twitter">Google</a> 
 
</div>

Смотрите также эту fiddle

Answer 4

Вы не можете использовать :not с селектором псевдо элемента (см this).

Что вы можете сделать, это думать по-другому: прозрачно-обойти все это, а затем цвет с ::first-letter. Поскольку последний имеет более высокую специфичность, он переопределит прозрачную настройку, таким образом, достигнет желаемого результата.

Answer 5

Альтернатива, основанная на ответе Варуны, с использованием color вместо атрибутов на основе макета. Главное преимущество заключается в том, что он работает на каждом проверенном мной браузере (Firefox, Chrome и M $ Edge, но, вероятно, должен работать на всех браузерах), и он не вызывает каких-либо визуальных сбоев (например, «базовый прыжок пикселя» из второго решения принятого ответа), поскольку он использует полностью визуальный атрибут.

Проблема с вашим оригинальным CSS заключается в том, что вы не можете использовать псевдоэлементы (::blah) внутри :not. Вы должны расширить его в обратной логике, так что вам не нужно :not

dt { 
 
    color: transparent; 
 
} 
 
dt::first-letter { 
 
    color: black; 
 
} 
 

 
/* For testing */ 
 
dt:hover { 
 
    color: black; 
 
}

<dt>Hello World!</dt>