How to hide text character according to size of 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

score 4 · Answer 1 · edited May 23 '17 at 11:53

4

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

edited May 23 '17 at 11:53

Community

1
1

answered Feb 09 '17 at 04:45

Michael Benjamin

265,915
79
461
583

I hope my answer helped you. If it did, consider accepting it (click check mark). If not, feel free to post a comment. Cheers! – Michael Benjamin Feb 15 '17 at 12:18

score 1 · Answer 2 · answered Feb 09 '17 at 04:48

1

Apply following style to your div.

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

answered Feb 09 '17 at 04:48

Learner

157
1
2
11

score 0 · Answer 3 · answered Feb 09 '17 at 04:46

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

How to hide text character according to size of div

3 Answers3