文本溢出：CSS的省略号属性无法正常工作[重复]答案

【问题标题】：text-overflow: ellipsis property of CSS not working properly [duplicate]文本溢出：CSS的省略号属性无法正常工作[重复]
【发布时间】：2015-06-26 19:12:02
【问题描述】：

我正在尝试在具有动态高度的 HTML div 上使用 CSS text-overflow: ellipsis 属性。 JS小提琴链接是https://jsfiddle.net/GS2306/bj8jg6nc/1/

#first {
    max-height: 310px;
    width: 300px;
    border: 1px solid red;
}
.one {
    max-height: 150px;
    width: inherit;
    border: 1px solid blue;
    font-size: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;
    white-space: nowrap;
}
.two {
    height: 100px;
    width: inherit;
    border: 1px solid green;
}

我无法看到占用可用空间的全文。

但是，当我从具有“one”类的 div 中删除“white-space: nowrap”属性时，我可以看到文本占用了可用空间。 https://jsfiddle.net/GS2306/bj8jg6nc/2/

在这种情况下如何使文本占据最大宽度 150 px，并将溢出的文本显示为剩余部分的省略号

【问题讨论】：

你是什么浏览器
你想使用多行和省略号吗？
@Cayce K。我正在使用谷歌浏览器
@PraveenKumar 是的。我想同时使用
您是否检查过它在 Firefox 上是否正确？

标签： html css

【解决方案1】：

您可以考虑使用display: -webkit-box 并使用line-clamp: <num> 将是一个解决方案。你想要 X 行文本。之后的一切，优雅地切断。那是“线夹”，这是一个完全合法的愿望。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

h2 {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 109.2px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

&lt;h2&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.&lt;/h2&gt;

还有你的标记。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

.one {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 72.2px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="first">
  <div class="one">Using text-overflow is a difficult skill to master. Please help me with your comments</div>
  <div class="two"></div>
</div>

您可能认为有趣的一些参考资料：

【讨论】：

它是如何工作的？你修复了什么？
@ToniLeigh 检查上面。
使用display: -webkit-box; 和-webkit-line-clamp: 2;。
我不确定在没有解释甚至突出显示更改的情况下转储一堆代码的答案非常好，我们很快就会提出一个这样做的问题 - 它只是鼓励剪切和粘贴解决方案，而不是理解问题
@ToniLeigh 添加详细信息。看哪。感谢您指出。