Скрыть первые символы x
6 hallibus [2015-04-10 00:12:00]
Можно ли скрыть первый символ x элемента h4 через css?
Например:
<h4>Data: This is some random data.</h4>
"Данные:" не должны отображаться.
Я попробовал переполнение и перемещение div, который содержит h4, это работает, но это не очень хорошее решение для меня.
Может быть, есть команда, о которой я не знаю, что помогает. Я знаю, что JavaScript и strreplace будут работать, но я ищу чистое решение CSS.
html css
4 ответа
4 Решение Shomz [2015-04-10 00:15:00]
К сожалению, CSS не может рассчитать ширину строк и не имеет доступа к текстовому контенту... Если вы использовали моноширинные шрифты, вы могли бы вычислить ширину вручную, исходя из размера шрифта, но это все равно будет плохим решением.
Отрицательные поля, отступы и т.д. ненадежны, поскольку мы не имеем представления о том, как визуализируются шрифты, а это означает, что все они могут сломаться и выглядеть уродливыми в разных браузерах под разными уровнями масштабирования и т.д.
Нижняя строка: Только CSS не может этого сделать
4 simpleManderson [2015-04-10 01:44:00]
Как говорили другие, невозможно точно, что вы хотите. Но просто для удовольствия, если это всегда "Данные:", которые вы пытаетесь скрыть, вы можете сделать это:
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>Но я согласен с другими, перехват в PHP, вероятно, лучший подход.
2 Dan Ovidiu Boncut [2015-04-10 00:15:00]
Попробуйте использовать текстовый отступ с отрицательным значением и переполнением скрытым:
h4{
overflow-x: hidden;
text-indent: -10px;
}
И лучший результат будет, если у вас есть моноширинный шрифт, и вы смотрите в браузере, который поддерживает ch единицы, так что text-indent: -4ch будет означать, что вы скрываете 4 символа.
1 hallibus [2015-04-11 01:16:00]
Хорошо, поэтому нет чистого решения CSS. Но я нашел довольно простой способ выбрать первое слово через jQuery и обернуть его в.
jQuery(".first-word").each(function(){
var me = $(this), fw = me.text().split(' ');
me.html( '<span>'+fw.shift()+'</span> '+fw.join(' ') );
});