Question

我试图用span元素做一个技巧。附上一张图片，以便我更容易解释。

左当前行为→正确所需的

所以我的想法是我需要在span元素中只显示3行文本。超过3我需要这样做，只显示3个，最后一个单词是[...]（当悬停剩余的文本时 - dis part已完成）。

我在css方面试过这样的事情

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

是的，它确实有效，每次只显示3行，但如果我有更多，我不知道我怎么能处理我所说的情况。

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

我有40条可以显示的消息以及介于＆＃34;＆＃34;之间的文章的名称。可以是任何长度。

    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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;

看看是否适合？

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

4 个答案: