使文本适合div

Question

我试图根据div大小仅显示我的文本的一部分。在我发现的相关帖子后，我使用了这个：

example {
  text-overflow: ellipsis; 
  width: 100%;
  overflow:hidden;
}

问题是文本的最后一行经常在中间（水平）被切断，具体取决于屏幕尺寸。解决问题的最佳方法是什么？

感谢。

Answer 1

我走了另一条路：

display: flex;
flex-wrap: wrap;

---

这里隐藏内容并正确包装：

body 
{
   background: #006699;
}
#main 
{
    padding: 20px;
    width: 200px;
    height: 75px;
    background: #fefefe;
    border: 2px solid #336699;
    display: flex;
    flex-wrap: wrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

<div id="main">
  <div>
    <b>Note:</b> 
    Internet Explorer 10 and earlier versions do not support the flex-wrap property.
  </div>
  <br />
  <div>
    <b>Note:</b> 
    Safari 6.1 (and newer) supports an alternative, the -webkit-flex-wrap property.
  </div>
</div>

---

但缺少某些东西;省略号！

<强> Kyle Simpson from HTML5 Hub tells us why :

  

... text-overflow:ellipsis仅适用于单行文字。也就是说，您不能同时将文本换行到后续行 和 将椭圆放在最后一行的末尾。

     

Bummer ，因为这正是您可能想要的，例如在紧凑空间中显示新闻项目或推文，您需要显示前两行然后椭圆形，可能在悬停或点击时显示。

Answer 2

尝试添加您的风格：

white-space: nowrap;

Answer 3

不确定这是否适合您，但如果您可以将div的高度保持为文本行高的倍数（例如，15 x 5 = 75），那么您的赢了中线。

.example {
  text-overflow: ellipsis; 
  width: 100%;
  overflow:hidden;
  font-size: 15px;
  line-height: 15px;
  height: 75px;
}