CODEWITHSUNDEEP
htmlcss
ar em
ar em

Reputation: 444

How to hide text character according to size of div

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:

enter image description here

i want my output to be like:

enter image description here

thank you

Upvotes: 3

Views: 71

Answers (3)

Learner
Learner

Reputation: 281

Apply following style to your div.

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

Upvotes: 1

kvn
kvn

Reputation: 2300

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

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371113

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

Upvotes: 4

Related Questions