Check if span element contains more than 3 lines

Question

I'm trying to do a trick with a span element. There is an image attached so that I can explain easier.

Left current behavior → Right desired one

So the idea is I need to display in the span element only 3 lines of text. Having more than 3 I need to make such that only 3 are displayed and the last word is [...] (when hover the remaining text is viewed - dis part is done).

I've tried something like this on the css side

span.itemMessage
{
    display: block; /* or inline-block */
    height: 37px;
    overflow: hidden;
    position: relative;
}

and yes it works ok, shows only 3 lines every time but if i have more I have no idea how can I handle the case that I was talking about.

I'm thinking of comparing the height of the text with the height of the span and if the height of the text is greater than do some .js, but I have no idea how to do this.

I have 40 messages that can be displayed and the name of the article which is between "" can be of any length.

    var trimedMessage = message;

    //try {
    //    var first = message.split('“');
    //    var second = first[1].split('”');
    //    var article = second[0];
    //    if (article.length > 
    //    if (message.length > 80) {
    //        var newItem = 
    //    }
    //}
    //catch (err) { }

    return trimedMessage;

This is something that I've tried previously but due to the fact that the message is very dynamic I cannot handle all the cases.

So in the end my question is how can I calculate the difference between the span element height and the message. Or if any other ideas they are more than welcome

Thank you

PS: this is the HTML

<div class="notification ' + classColor + '">' +
                       '<a href="#">' +
                           '<i class="category-icon fa ' + classIcon + '"></i>' +
                           '<span class="abonnementMessage" data-toggle="tooltip" data-placement="left" title="' + abonnementMessage + '"maxlength="10">' + abonnementMessage + '</span>' +
                           '<small><i class="fa fa-warning">' + date + '</i> </small>' +
                       '</a>

Answer 1

There is a pure CSS solution to it. The trick is to use CSS line-clamp. Here is a working example: https://codepen.io/martinwolf/pen/qlFdp (it even contains a solution for browsers not supporting line-clamp)

Hope this helps!

Answer 2

Here is a link I found on the internet with pure CSS : CodePen

body {
  margin: 0;
  padding: 50px;
  font: 400 14px/1.2em sans-serif; 
  background: white;
}

/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;
  
  /* */
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  width: 1em;
  /* set width and height */
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. <br>
A towel, it says, is about the most massively useful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon;  use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
<p class="block-with-text">Small text, less then one row. Without dottes.</p>
<p class="block-with-text" style="width: 250px;">2.5 lines example: A towel is about the most massively useful thing an interstellar hitch hiker can have</p>

Answer 3

I just Tried it with an example..May this will help you

<style>

        .notification
        {
            background-color:rgba(255,115,7,1.00);
            padding:10px;
            border-radius:10px;
            display:inline-block;
            color:#fff;
            width:200px;
        }
        .notification .fa
        {
            width:20px;
            height:20px;
            border-radius:100px;
            background-color:#fff;
            display:inline-block;
            float:left;
        }
        .notification .abonnementMessage
        {
             display: -webkit-box;
            margin-left:10px;
            font-style:italic;
            height:47px;
            float:right;
            max-width:150px;
            overflow:hidden;
            text-overflow:ellipsis;
            box-orient: vertical;
            -webkit-box-orient: vertical;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            font-size: 12px;
            line-height:1.3;
        }
        </style>

    <textarea id="message" class="form-control" rows="5" style="margin-bottom:20px;" placeholder="Enter your  message"></textarea>
    <div class="notification">
    <a href="#">
    <i class="category-icon fa"></i>
    <span class="abonnementMessage" data-toggle="tooltip" data-placement="left" title="" maxlength="10"></span>
    </a>

Answer 4

Try the text-overflow css attribute:

text-overflow: ellipsis;

See if that suits?