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

Question

I want to truncate text according to div size

this is the code snippet:

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

this is my output:

i want my output to be like:

thank you

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>

More details: Applying an ellipsis to multiline text

Answer 2

Apply following style to your div.

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

Answer 3

You will need to give it a height and use text-overflow: ellipsis;

You can use this class.

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