一行或两行后的CSS单词省略号('..'）

CSS word ellipsis ('...') after one or two lines

本文关键字：单词 省略号 CSS 两行 一行      更新时间：2024-03-07

我正试图使用CSS在JavaScript中创建一个换行，条件是：

如果DIV包含一个非常长的单词，例如"asdasfljashglajksgkjasgklajsghl"，我想显示：

     |asdasfljashglajk...|

如果DIV包含一个长句，例如"如果每次告诉我不能"时我都有一角硬币，我想显示：

     |if i had a dime for|
     |everytime i was... |

我使用HTML、CSS、JavaScript。我不能使用jQuery。

如果可能的话，请告诉我。

发现这个：

http://codepen.io/martinwolf/pen/qlFdp

-webkit-line-clamp似乎适用于某些浏览器。

为此，您可以使用text-overflow: ellipsis;属性。像这样写

white-space: nowrap;
text-overflow: ellipsis;

我知道我的anwser有点晚了，但我刚刚写了一段代码，这段代码与有关

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/'s+/);
        words.push('...');
        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

当然，您应该将jQuery选择器保存在一个变量中，这样就不会每次都查询DOM。

遗憾的是，单凭CSS我认为你做不到。

http://jsfiddle.net/TVVHs/

仅限text-overflow: ellipsis;与防止多条线路的white-space: nowrap;一起工作。

可能有一个疯狂的javascript解决方案，它会不断地截断单词，直到元素高度可以接受，但这会很慢，而且非常糟糕。

当你被允许使用jQuery时，你可以在这个链接上看到dotdot插件。。使用起来非常简单，效果非常好！

现在我可以建议你看看这把小提琴！谁能工作text-overflow: ellipsis

在摆弄了CSS之后，我想出了一个"下一个最好的"CSS解决方案：

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

这总是假设你至少有3行文本，并且有几个问题。如果最后一个要换行到第4行的单词很长，那么最后一个单词和省略号之间会有一个异常大的空格。同样，如果它是非常小的东西，比如"a"，它可以与最后一个单词重叠。

您可以添加另一个容器，并在p之外使用省略号，通过一些注释调整，我相信有人会做得更好。

如果您能保证内容会被溢出，下面是我提出的解决方案。它适用于我的网站，我想保持它的简单。

html:

<p class="snippet">
   [content]
</p>

css：

.snippet {
    position: relative;
    height: 40px; // for 2 lines
    font-size: 14px; // standard site text-size
    line-height: 1.42857; // standard site line-height
    overflow: hidden;
    margin-bottom: 0;
}
.news-insights .snippet:after {
    content: "'02026";
    position: absolute;
    top: 19px;
    right: 0;
    padding-left: 5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}

然后，您可以使用填充和背景渐变来获得更时尚的演示。

希望这能回答您的问题

  @mixin multilineEllipsis(
  $lines-to-show: 2,
  $width: 100%,
  $font-size: $fontSize-base,
  $line-height: 1.6) {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: $width;
  height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://codepen.io/martinwolf/pen/qlFdphttp://caniuse.com/#search=-webkit线夹

当容器的宽度和百分比固定时，显示省略号需要以不同的方式处理。

  • 容器宽度固定时

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

  • 当容器的宽度为百分比或自动时，在这种情况下，在该容器中定义另一个标记来呈现文本，并将宽度指定为0，最小宽度指定为100%，这样它将采用容器的宽度并显示省略号。下面是要使用的LESS类：

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

相关文章：