Html 仅在div内的两行内换行文本

我想在特定宽度的div内仅将文本包装在两行内。如果文本超过了两行的长度，那么我想显示省略号。 有没有一种方法可以使用CSS实现这一点

e、 g

---

感谢

如果设置元素的

行高和
高度，并设置
溢出：隐藏，则CSS可以将输出限制为两行文本：

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}


或者，您可以使用CSS
文本溢出
和
空白
属性添加省略号，但这似乎只适用于一行

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

还有一个演示：


实现多行文本和省略号似乎是javascript的领域。
使用下面的链接将文本和省略号换行检查链接


这需要下面的jquery

我相信CSS唯一的解决方案
文本溢出：省略号
只适用于一行，因此您将无法执行以下步骤：

.yourdiv {

    line-height: 1.5em; /* Sets line height to 1.5 times text size */
    height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
    width: 100%; /* Use whatever width you want */
    white-space: normal; /* Wrap lines of text */
    overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
    text-overflow: ellipsis; /* Ellipses (cross-browser) */
    -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

您尝试过jQuery吗？
请参阅

只需将
行高度设置为
高度的一半
：

line-height:20px;
height:40px;

当然，为了使
文本溢出：省略号
有效，您还需要：

overflow:hidden;
white-space: pre;

我所见过的最好的一款仅支持CSS且响应迅速的产品来自：


CSS:

Html:


叫我以实玛利。几年前&ndash；不管精确到多长时间&ndash；我的钱包里几乎没有钱，在岸上也没有什么特别让我感兴趣的东西，我想我会航行一会儿，看看世界上有水的地方。这是我驱除脾脏，调节血液循环的一种方法。每当我发现自己的嘴变得冷酷；每当我的灵魂里有一个潮湿、细雨蒙蒙的十一月；每当我发现自己在棺材仓库前不由自主地停下来，提起我遇到的每一个葬礼的后面；尤其是当我的hypos占据了我的上风时，它需要一个强有力的道德原则来防止我故意走上街头，有条不紊地敲掉人们的帽子&ndash；然后，我认为是时候尽快出海了

另一个简单快捷的解决方案

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

原始问题和答案的参考是
尝试以下内容：

这是一段有很多文字的段落

p{
线高：1.5em；
高度：3em；
溢出：隐藏；
宽度：300px；
}
p：：以前{
内容：“…”；
浮动：对；
边缘顶部：1.5em；
}
通常，单行截断非常简单

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

两行截断稍微有点棘手，但是可以用css完成。这个例子是在sass中完成的

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

Webkit的CSS唯一解决方案


//仅用于演示
$（函数（）{
$（'#toggleWidth'）。在（'click'，函数（e）上{
$（'.multileLabel'）.toggleClass（'maxWidth'）；
});
})
.multileLabel{
显示：内联块；
框大小：边框框；
空白：行前；
单词包装：打断单词；
}
.multillelabel.textMaxLine{
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit线夹：2个；
溢出：隐藏；
}
/*仅用于演示*/
.multilleLabel.maxWidth{
宽度：100px；
}

如果元素的宽度不够宽，此文本将自动换行为两行。


切换宽度
仅限CSS

    line-height: 1.5;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

@Asideen bn Muhammad的解决方案对我来说很有效，只是对css做了一点修改

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }

在所有这些示例中，我们假设：

#someDiv {
  width: 250px;
  overflow: hidden;
}

正如我所提到的，将省略号与多行文本组合似乎不起作用，至少我在Chrome中没有这样做。这解决了我当前的问题，因为我添加了：
display:block
和
minheight:13px
和
max height:26px
用于设置
的高度，因为某种原因，我只看到一行经过：/第二个示例只有一行，当请求的解决方案需要两个时。第三个示例不适用于我，在Chrome和Firefox中进行了测试。在这个失败的示例中
空白：nowrap打断它，如果你把它注释出来，它会工作。这是我迄今为止看到的最好的解决方案。您可能希望减少小提琴中的高度（200px）变量，对于我的屏幕大小，文本最初没有溢出。此解决方案不灵活，需要在源文本中手动换行。请注意，每个框仅包含一行文本。所需的解决方案类似于的第二个框，但第二行末尾有一个省略号。@JoshuaCoady很好，但
文本溢出：省略号
仅适用于溢出行框的内联框。没有
空白：pre
他们只会转到下一行框。然后需要手动断线。我不认为有一个完美的解决方案。惊人的解决方案！我还没有完全测试过它，但在第一次尝试时，它非常有效well@vinesh这个解决方案着火了！似乎
box-orient
is.Works！在Firefox（和Firefox Android）的
flexbox容器中的
mat卡内容中测试了这一点。
box-orient
可以通过设置
layout.css.prefixes.webkit=true
并将css更改为
-moz-webkit-box
来启用。谢谢
@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

    line-height: 1.5;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }

#someDiv {
  width: 250px;
  overflow: hidden;
}