如何根据div的大小隐藏文本字符

Question

我想根据div大小截断文本

这是代码段：

＆＃13;

＆＃13;

<div style="padding-left:10px; width:200px; border:1px solid #000000">  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.   
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,  
   when an unknown printer took a galley of type and scrambled it to make a type specimen book.   
  It has survived not only five centuries  
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的输出：

我希望我的输出像：

谢谢

Answer 1

div {
  white-space: nowrap;      /* new */
  overflow: hidden;         /* new */
  text-overflow: ellipsis;  /* new */
  padding-left: 10px;
  width: 200px;
  border: 1px solid #000000;
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries</div>

更多详情：Applying an ellipsis to multiline text

Answer 2

将以下样式应用于div。

div{
    padding-left: 10px;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px solid #000000;
    white-space: nowrap;
}

Answer 3

您需要给它一个高度并使用text-overflow: ellipsis;

您可以使用此课程。

.no-overflow {
  padding-left:10px; 
  width:200px; 
  border:1px solid #000000;
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}