16

我正在尝试使用 CSS 在 JavaScript 中创建自动换行，条件是：

如果 DIV 包含一个很长的单词，例如"asdasfljashglajksgkjasghklajsghl"，我想显示：

     |asdasfljashglajk...|

如果 DIV 包含一个很长的句子，例如“如果我每次被告知我不能得到一角钱”，我想显示：

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

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

请让我知道是否可能。

4

9 回答 9

9

发现这个：

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

看起来-webkit-line-clamp在某些浏览器中有效。

于 2014-06-12T13:54:55.363 回答
8

我知道我对 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。

于 2013-05-07T13:58:33.377 回答
7

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

white-space: nowrap;
text-overflow: ellipsis;
于 2012-07-26T08:31:22.133 回答
4

可悲的是，仅使用 CSS 我认为您做不到。

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; 仅适用于white-space: nowrap;防止多行的情况。

可能有一个疯狂的 javascript 解决方案，它会一直砍掉单词，直到元素高度可以接受，但这会很慢，而且非常讨厌。

于 2012-07-26T08:37:26.220 回答
3

在摆弄 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.

于 2013-08-18T08:19:00.710 回答
3

当您被允许使用 jQuery 时，您可以在此链接上看到 dotdotdot 插件。使用起来非常简单，而且效果很好！

目前我可以建议你看看这个小提琴！谁来工作text-overflow: ellipsis

于 2013-05-07T14:14:18.900 回答
2

希望这能回答你的问题

  @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/qlFdp http://caniuse.com/#search=-webkit-line-clamp

于 2016-08-18T15:08:19.313 回答
1

如果你能保证内容会溢出，这就是我想出的解决方案。它适用于我的网站，我想保持简单。

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
}

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

于 2015-07-22T17:20:56.583 回答
1

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

  • 容器宽度固定时

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

于 2016-09-26T22:58:16.217 回答