Ritardi.Net Ritardi.Net - 3 months ago 11
CSS Question

How to interrupt a H4 text if too long

I have a title in text inside a tag in wordpress. I want that if the title is too long (does not fit inside the width) the text is truncated and "..." added in its place.

So for example the title (taken from ipsum generator):

Audiam tritani prompta mel ex


Should looks like:

Audiam tritani promp...


Tried to play with the overflow property with no success..

Answer

I had this problem a while ago. You can simple add text-overflow: ellipsis; to the styling of the h4 tag.

Have you looked at W3 Schools solution? Check it out at this link.

Your final code should look something like this:

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}
<!DOCTYPE html>
<!-- THIS Code was taken from W3 Schools-->
<html>
<head>


</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>
  <h1>Code from W3 Schools!</h1>

</body>
</html>