Hide first x characters

Question

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

For instance:

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

"Data:" should not be displayed.

I tried overflowing and moving a div that contains h4, this works, but this is not a good solution for me.

Maybe there is a team that I don’t know about that helps. I know that JavaScript and strreplace will work, but I'm looking for a clean CSS solution.

Answer 1

Unfortunately, CSS cannot calculate the width of the lines and does not have access to text content ... If you used monospace fonts, you could calculate the width manually based on the font size, but this would still be a bad solution.

Negative margins, indents, etc. unreliable, since we have no idea how fonts are rendered, which means that all of them can break and look ugly in different browsers under different zoom levels, etc.

Bottom line: Only CSS cannot do this.

Answer 2

As others have said, it’s impossible to exactly what you want. But just for fun, if it's always the “Data:” you are trying to hide, you can 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, interception in PHP is probably the best approach.

Answer 3

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

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

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

Answer 4

Ok, so there is no pure CSS solution. But I found a pretty simple way to select the first word through jQuery and wrap it in.

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

jsfiddle link