CODEWITHSUNDEEP
htmlcss
hallibus
hallibus

Reputation: 255

Hide first x characters

Is it possible to hide the first x character of a h4 element via css?

For example:

<h4>Data: This is some random data.</h4>

"Data: " shall not be shown.

I tried overflow and moving the div which contains h4, this works, but it isn't a good solution for me.

Maybe there's an command I don't know about which helps. I know JavaScript and strreplace would work as well, but I'm looking for a pure CSS solution.

Upvotes: 12

Views: 28863

Answers (4)

hallibus
hallibus

Reputation: 255

Ok, so there isn't a pure CSS solution. But I found a pretty simple way to select the first word via jQuery and wrap it in a <span>.

jQuery(".first-word").each(function(){
    var me = $(this), fw = me.text().split(' ');
    me.html( '<span>' + fw.shift() + '</span> ' + fw.join(' ') );
});

jsfiddle link

Upvotes: 3

simpleManderson
simpleManderson

Reputation: 436

Like others have said, it's not possible to exactly what you want. But just for fun, if it's always "Data: " that you're trying to hide, you could do this:

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>

But I agree with others, intercepting in the PHP is probably the best approach.

Upvotes: 11

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Try using text-indent with negative value and overflow hidden:

h4{
overflow-x: hidden;
text-indent: -10px;
}

And the best result would be if you have a monospace font and you look in a browser that supports ch units so that text-indent: -4ch would acctualy mean that you hide 4 characters.

Upvotes: 13

Shomz
Shomz

Reputation: 37701

Sadly, CSS can't calculate the width of strings and has no access to textual content... If you were using monospace fonts, you'd be able to calculate the width manually, based on the font size, but it would still be a bad solution.

Negative margins, indents, etc. are unreliable as we have no idea about how the fonts are rendered, meaning it could all break and look ugly in different browsers, under different zoom levels, etc...

Bottom line: CSS alone can't do it

Upvotes: 5

Related Questions