相关疑难解决方法(0)

我想在固定大小的div中显示文本,如果文本的大小比用更多的文本用点表示的话.

例

如果div内显示的文本数量是10则

文本"澳大利亚"应显示为"澳大利亚"文本"美国"应显示为"United Sta ..."

为什么这么难:

• 固定高度DIV,多行文字
• 如果此框的文字太长,请在结尾处显示"..."
• 别切词!

以下JSFiddle显示了一个演示.

问题:

• 如何使"..."也出现在Firefox,IE,Edge和Safari中？它目前仅适用于Chrome浏览器(请参阅.chromecss)在JSFiddle中
• 我怎样才能确保只有空格被剪切但没有文字？
• 如何只用CSS完成？

示例:

• 第二个方框切断了abcdefghijk这个词,我希望它在第二个单词之后剪切,然后添加"..."

.truncate {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 10px;
  margin-bottom: 10px;
  width: 260px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.truncate.ellipsis {
  height: 50px;
  text-overflow: ellipsis;
}
.truncate.ellipsis.chrome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="truncate">
  No truncating at all, height adjusts to text: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk …

我正在制作一个网站，该网站将显示来自 YouTube API 的一些视频，并在服务器端将视频描述截断为 170 个字符。它们必须放入一个狭窄的盒子中，因此每当它包含 URL 或长单词使其包裹很多时，它有时会溢出容器。是否有客户端方法来截断字符串并在末尾添加省略号（我可以使用溢出：隐藏，但我不能使用省略号。这是我的最后手段）。

下面是我正在尝试做的事情的图片：

我试图在 div 块中显示一个长文本，并希望如果文本超过 div 高度，则需要显示“...”，否则将整个文本填充到一个块中。但问题是，使用 css text-overflow:ellipsis 会将整个长文本剪切为一行文本，并将这些点放在可以写入更多文本的下方空间中。

<div  class="hide-long-text">

现在长了呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜

.hide-long-text {
   height: 80px;
    width: 110px;
    border: 1px solid #adb8c0; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

这是一个提琴手链接 有人可以给我一个提示，我可以如何使用这个可用空间，当文本超过 div 高度时，然后显示“...”

目前为了垂直限制文本框,并添加省略号,只有一个使用line-clamp&box-orient的webkit css3解决方案.

演示(野生动物园或铬):http://jsfiddle.net/ArKeu/136/

现在这在其他任何地方都不受支持,甚至不使用前缀.所以我的问题是,是否可以在纯JavaScript中轻松完成此操作.简而言之,让一个句子在多行上流动,并在添加省略号的同时添加一个句子.

谢谢你的帮助.

我在这里找到了这个小提琴,用于截断来自@iambriansreed的 html中的文本

http://jsfiddle.net/iambriansreed/bjdSF/

<p class="minimize">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>

jQuery(function(){

    var minimized_elements = $('p.minimize'); …

我有一个产品清单,其中写有产品的标题.我想要做的是检查产品标题是否超过2行,在这种情况下,打印刚好足以适合2行,并在最后添加"...".

有任何想法吗？