检查span元素是否包含3行以上

Question

我正在尝试使用span元素完成一项技巧。 附有图像，以便于我解释。

左当前行为→ 右期望一个

因此，想法是我只需要在span元素中显示3行文本即可。 daccess-ods.un.org daccess-ods.un.org如果要超过3个，我需要显示为3个，最后一个词是[（将鼠标悬停在其余文本上时将显示-分开）。

我已经在CSS方面尝试过类似的操作

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

是的，它可以正常工作，每次仅显示3行，但是如果我有更多行，我不知道如何处理我所谈论的情况。

我正在考虑将文本的高度与跨度的高度进行比较，以及文本的高度是否大于某些.js，但是我不知道如何执行此操作。

我可以显示40条消息，“”之间的文章名称可以任意长度。

    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;

这是我之前尝试过的方法，但是由于该消息非常动态，因此我无法处理所有情况。

因此，最后我的问题是如何计算span元素高度和消息之间的差异。 或者，如果有其他想法，那么欢迎

谢谢

PS：这是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

有一个纯CSS解决方案。 诀窍是使用CSS line-clamp 。 这是一个工作示例： https : //codepen.io/martinwolf/pen/qlFdp （甚至包含不支持换行的浏览器解决方案）

希望这可以帮助！

Answer 2

这是我在互联网上使用纯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

我只是用一个例子试了一下。可能对您有帮助

<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

试试text-overflow css属性：

text-overflow: ellipsis;

看看是否适合？