Question

我有一个p - 标记，其中包含特定的width和height。如果标记中的文字太长，我想使用text-overflow:ellipsis获取...。这可以通过多线文本的css来解决吗？

Answer 1

谷歌搜索并没有透露任何有远见的东西，所以我会说这是不可能的。

我找到了text-overflow: -o-ellipsis-lastline，但仅适用于Opera ：http://people.opera.com/dstorey/text/text-overflow.html（镜像：http://jsbin.com/exugux/）

还有一个类似的WebKit解决方案：http://dropshado.ws/post/1015351370/webkit-line-clamp

Answer 2

你可以用css做到这一点。它只适用于webkit浏览器，但对其他浏览器有后备支持。

使用：

display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

以及：

max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;

这是小提琴：demo

Answer 3

我发布这个是因为我相信我的解决方案不如流行的解决方案复杂，它涉及伪元素和浮动行为。我最近不得不创建一个可以在IE7中运行的解决方案，所以伪元素首先不是一个选项。

该技术涉及4个要素：

确定内容最大高度的块级容器
文本内容的内联包装
内联包装器中包含的省略号
一个'fill'元素，也在内联包装中，当文本内容不超过容器的尺寸时，它会遮挡省略号

与以前仅使用CSS的解决方案一样，该技术要求内容使用纯色背景或固定位置背景图像：省略号需要隐藏部分文本，填充需要隐藏省略号。你可以做一个奇特的渐变效果，让文字淡入省略号，但我会留下那些美观的细节。

HTML结构

<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
  <!-- The inline wrapper -->
  <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.
    <!-- The ellipsis, which can contain anything you want - 
         (a 'more' link, for example) -->
    <span class="ellipsis">
      &#133;
    </span>
    <!-- The fill, which covers the ellipsis when the text doesn't overflow -->
    <span class="fill"></span>
  </span>
</p>

CSS

body {
  /* We need a solid background or background-position: fixed */
  background: #fff;
  /* You'll need to know the line height to clamp on line breaks */
  line-height: 1.5;
}

.clamped {
  overflow: hidden;
  position: relative;
}

/* Clamp to 2 lines, ie line-height x 2:
   Obviously any number of these classes can be written as needed
 */
.clamped-2 {
  max-height: 3em;
}

/* The ellipsis is always at the bottom right of the container,
   but when the text doesn't reach the bottom right...
 */
.clamped .ellipsis {
  background: #fff;
  bottom: 0;
  position: absolute;
  right: 0;
}

/* ...It's obscured by the fill, which is positioned at the bottom right 
   of the text, and occupies any remaining space.
 */
.clamped .fill {
  background: #fff; 
  height: 100%;
  position: absolute;
  width: 100%;
}

Here's a fiddle demonstrating it：调整浏览器的宽度或更改文本，使其看到从省略号转为无省略号。

除了任意的优雅因素之外，我认为这比流行的解决方案更具性能，因为它不依赖浮动（需要大量重新绘制） - 绝对定位更容易计算，因为没有计算布局时的依赖关系。

Answer 4

我写了一个javascript函数来修复多行省略号问题

function ellipsizeTextBox(id) {

    var el = document.getElementById(id);
    var keep = el.innerHTML;
    while(el.scrollHeight > el.offsetHeight) {
        el.innerHTML = keep;
        el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
        keep = el.innerHTML;
        el.innerHTML = el.innerHTML + "...";
    }   
}

希望这有帮助！

Answer 5

我找到了一个多行跨浏览器纯CSS省略号的解决方案。我尝试了很多解决方案，只有这个解决方案只使用CSS。我有一个动态宽度的div，必须设置高度。

这里是链接：http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Answer 6

修改了function by user1152475，使其逐字逐句（空格分隔）而不是逐个字符。

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ')  + '...';
    }   
}

注意，对于这两种解决方案，该框必须具有设定的高度。

Answer 7

HTML没有提供此类功能，这非常令人沮丧。

这就是为什么我开发了一个小型库来处理这个问题。该库提供了对模型化和执行字母级文本呈现的对象。这应该只是你需要的：

在http://www.samuelrossille.com/home/jstext了解详情，了解屏幕截图，教程和下载链接。

Answer 8

正如之前指出的那样，有一种奇怪的方法可以通过David DeSandro发布的webkit-box实现这一目标：

  elements_to_style {
      display: -webkit-box;
      overflow : hidden;
      text-overflow: ellipsis
      -webkit-line-clamp: number_of_lines_you_want;
      -webkit-box-orient: vertical;
  }

链接http://dropshado.ws/post/1015351370/webkit-line-clamp

Answer 9

万一有人到达这里，这可能是你的解决方案吗？纯css跨浏览器。 http://codepen.io/issactomatotan/pen/LkJbjO

<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;">
<p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>

Answer 10

我已经摆弄了大部分这些解决方案，最好的办法就是使用可靠的clamp.js插件。它适用于所有环境，占地面积很小（3K）。

Answer 11

嘿，你可以用css这样做。

适用于Chrome＆amp; Safari浏览器

.block-with-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

对于Firefox＆amp; Internet Explorer

* 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; /* place for '...' */ margin-right: -1em; padding-right: 1em; } /* create the ... */ .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; } /* hide ... if we have text, which is less than or equal to max lines */ .block-with-text:after { /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; /* set width and height */ width: 1em; height: 1em; margin-top: 0.2em; /* bg color = bg color under block */ background: white; }

Answer 12

.minHeightg{
height:5.6rem !important;
  width:20%;
}
.productOverflow
{
     overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}



/*firefox*/
@-moz-document url-prefix() {
   
   .productOverflow
{
   overflow: hidden;
   text-overflow:ellipsis;
   display: -moz-box !important;
   
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -moz-line-clamp: 3; /* number of lines to show */
   -moz-box-orient: vertical;
}

<div class="minHeightg">
    <p class="productOverflow">Some quick example text to build on the card title .</p>
    </div>

是否可以使用文本溢出：多行文本的省略号？

12 个答案:

HTML结构

CSS