Czy możliwe jest ukrycie pierwszego znaku x elementu h4 przez css?Ukryj pierwsze znaki x
Na przykład:
<h4>Data: This is some random data.</h4>
"Data:" nie powinny być pokazane.
Próbowałem przepełnienia i przenoszenia div, który zawiera h4, działa, ale nie jest dobrym rozwiązaniem dla mnie.
Może istnieje polecenie, którego nie znam, a które pomaga. Wiem, że JavaScript i strreplace też by działały, ale szukam czystego rozwiązania CSS.
Niestety, CSS nie może obliczyć szerokości łańcuchów i nie ma dostępu do zawartości tekstowej ... Jeśli używasz czcionek o stałej szerokości, możesz ręcznie obliczyć szerokość w oparciu o rozmiar czcionki, ale nadal byłoby to złe rozwiązanie.
Ujemne marginesy, wcięcia itp są niewiarygodne, jak nie mamy pojęcia o tym, jak czcionki są renderowane, czyli może to wszystko przerwa i brzydko wyglądać w różnych przeglądarkach, w różnych poziomach zbliżenia, etc ...
Konkluzja: sam CSS nie może zrobić to
Spróbuj użyć text-indent z wartością ujemną, przelewem ukrycia:
h4{
overflow-x: hidden;
text-indent: -10px;
}
a najlepszy wynik byłby jeśli masz czcionkę o stałej szerokości i y Spójrz na przeglądarkę, która obsługuje jednostki ch, dzięki czemu text-indent: -4ch może oznaczać, że ukryjesz 4 znaki.
Jak powiedzieli inni, nie jest możliwe dokładnie to, co chcesz. Ale tylko dla zabawy, czy to zawsze „danych”, które starasz się ukryć, można to zrobić:
h4 {
position: relative;
background-color: white;
}
h4:before {
content: "Data: ";
position: absolute;
top: 0;
left: 0;
background-color: white;
color: white;
}<h4>Data: This is some random data</h4>ale zgadzam się z innymi, przechwytując w PHP jest prawdopodobnie najlepsze podejście.
Niezły pomysł, szkoda, że nie działa, gdy za nim jest tło.+1 – Shomz
Ok, więc nie ma czystego rozwiązania CSS. Ale znalazłem dość prosty sposób, aby wybrać pierwsze słowo przez jQuery i zawijać je w.
jQuery(".first-word").each(function(){
var me = $(this), fw = me.text().split(' ');
me.html('<span>'+fw.shift()+'</span> '+fw.join(' '));
});
Owiń 'danych:' z elementem i ukryć go! – undefined
Nie sądzę, że jest to możliwe bez czegoś w rodzaju rozpiętości wokół "danych". – bjb568
Jedynym sposobem na zrobienie tego dynamicznie za pomocą CSS jest ustawienie 'max-width' i użycie' text-overflow'. – APAD1