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

我有一个带有特定宽度和高度的标签

如果标记中的文本太长，我想使用

文本溢出：省略号

获取

…

---

在多行文本上使用css可以解决这个问题吗？

谷歌搜索甚至没有透露任何有前途的东西，所以我想说这是不可能的

我确实发现

文本溢出：-o-ellipsis-lastline

，但它只在Opera中有效（镜像：）

---

还有一个类似的WebKit专用解决方案：

HTML不提供此类功能，这非常令人沮丧

这就是为什么我开发了一个小型图书馆来处理这个问题。该库提供用于建模和执行字母级文本呈现的对象。这正是您需要的：

---

阅读更多关于屏幕截图、教程和加载链接的信息。

我编写了一个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 + "...";
    }   
}

---

希望这有帮助

我之所以发布这篇文章，是因为我相信我的解决方案没有流行的解决方案复杂，后者涉及伪元素和浮点行为。我最近不得不创建一个可以在IE7中工作的解决方案，所以伪元素在一开始就不是一个选项

该技术包括4个要素：

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

与以前仅使用CSS的解决方案一样，该技术要求内容具有纯色背景或固定位置的背景图像：省略号需要遮住部分文本，填充需要遮住省略号。你可以做一个奇特的渐变效果，使文本淡入省略号，但我会让化妆品的细节自行决定

HTML结构 ：调整浏览器的宽度或更改文本以查看其从省略号转换为无省略号

---

除了任意的优雅因素外，我相信这比流行的解决方案性能更好，因为它不依赖于浮动（需要大量重新绘制）-绝对定位计算起来要简单得多，因为在计算布局时没有相互依赖关系。

你可以用css来完成。它只在webkit浏览器中工作，但在其他浏览器中有一个回退

使用：

以及：

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

这是小提琴：

修改了，使它可以逐字（空格分隔）工作，而不是逐字符工作

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

---

注意，对于这两种解决方案，盒子必须有一个设定的高度。

正如前面所指出的，有一种奇怪的方法可以通过David DeSandro发布的webkit盒子来实现这一点：

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

---

链接

嘿，你可以用css这样做

用于Chrome和Safari

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

适用于Firefox和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;
}

---

万一有人到了这里，这是你的解决办法吗？纯css跨浏览器。

asd asdasd asd asdasd asdasd asdasd asdasd asdasd asdasd asd asd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd

---

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

---

这里有一个链接：

这些解决方案大部分我都用过，你最好的选择是使用solid插件。它可以在所有环境下工作，并且占地面积很小（3K）。

.minHeightg{
高度：5.6rem！重要；
宽度：20%；
}
.产品溢出{
溢出：隐藏；
文本溢出：省略号；
显示：-网络工具包盒；
线高：16px；
/*退路*/
最大高度：3.6雷姆；
/*退路*/
-webkit线夹：3个；
/*要显示的行数*/
-网络工具包盒方向：垂直；
}
/*火狐*/
@-moz文档url-前缀（）{
.产品溢出{
溢出：隐藏；
文本溢出：省略号；
显示：-moz框！重要；
线高：16px；
/*退路*/
最大高度：3.6雷姆；
/*退路*/
-moz线夹：3个；
/*要显示的行数*/
-莫兹盒方向：垂直；
}
}

在卡片标题上构建一些快速示例文本

我相信这是对的。我读过的所有东西都表明nowrap是必需的。我刚刚添加了一个答案，链接到一篇文章，其中有人实现了一个可以通过的css解决方案。它不是很完美，但我觉得它是合理的。值得指出的是，

文本溢出：省略号

在Firefox中根本不起作用（显然计划在FF7发布时）。这是否回答了你的问题？看起来很有用。在你的网站上进行现场演示会很有用。另外，在IE9中测试

jstext examples.html

并调整大小产生了这样的结果，这显然有点破绽：@thirtydot感谢您的反馈。已修复错误并添加了实时演示！>我相信这更有效。你有数字吗？还有多少？唉，信仰是以缺乏确定性为前提的！您可以这样做，但我怀疑有更简单的方法来生成数字。将display:block添加到.clipped.fill可以修复一个问题，即如果只有一行内容，它会将填充推到最右边，以至于在没有溢出的情况下，.省略号也会被覆盖。添加显示块力。在content.mmm下填充。我认为这不是一个非常干净的解决方案，您仅限于背景颜色，如果您有不同的背景颜色，则不好：（@msqar您也可以使用固定（未调整大小的）背景图像（请参阅），但是的-这是一个限制。任何其他内容都需要Javascript。这取决于您对“clean”的定义：）在最新的firefox中不起作用，文本被修剪，但省略号不可见。不幸的是，同样的情况可能会发生

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

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

* 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;
}

<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>