Question

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

如果DIV包含一个非常长字，例如“asdasfljashglajksgkjasghklajsghl”，我想显示：

     |asdasfljashglajk...|

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

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

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

如果有可能请告诉我。

Answer 1

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

Answer 2

发现这个：

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

看起来-webkit-line-clamp适用于某些浏览器。

Answer 3

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

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

Answer 4

可悲的是，单凭CSS我认为你不能。

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; 仅与white-space: nowrap;一起使用，可防止多行。

可能有一个疯狂的javascript解决方案，一直切断单词，直到元素高度可以接受，但这将是缓慢的，非常讨厌hacky讨厌。

Answer 5

当你被允许使用jQuery时，你可以在this link看到dotdotdot插件..它非常简单易用，而且效果很好！

目前我建议你看一下fiddle！谁会工作text-overflow: ellipsis

Answer 6

在摆弄CSS以提出“次佳”CSS ONLY解决方案之后，我想出了这个：

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之外加上省略号，稍微调整一下我肯定有人会更好地调整一些东西。

Answer 7

希望这能回答你的问题

  @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

Answer 8

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

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
}

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

Answer 9

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

当容器的宽度固定时

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

一行或两行后的CSS字省略号（'...'）

9 个答案: