如何根據div的大小隱藏文本字符

Question

我想根據 div 大小截斷文本

這是代碼片段：

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

這是我的輸出：

我希望我的輸出是這樣的：

謝謝你

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>

更多詳細信息：將省略號應用於多行文本

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