CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Name
Name

Reputation: 408

How to trim a text?

Here is my screenshot:

Here is my screenshot:

and this is my following code :

<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>

My question, how to trim my text if it goes out of the div? I want my text is being trimmed like the second box. Please tell me how to do it.

Upvotes: 2

Views: 226

Answers (7)

Mukesh Ram
Mukesh Ram

Reputation: 6328

Set the style text-overflow, white-space, overflow property: 

<div style="background: green;height: 27px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;">
This is text to be written here
</div>

Upvotes: 3

Jordan Bonitatis
Jordan Bonitatis

Reputation: 1547

Set the following style properties:

  • text-overflow:ellipsis
  • white-space:nowrap
  • overflow:hidden

<div style="background:green; width:100px; height:27px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
This is text to be written here
</div>

Upvotes: 2

Sharma Vikram
Sharma Vikram

Reputation: 2470

Here is the code to trim the text using css or jquery

jquery

<div id="text">
This is text to be written here
</div>

<script type="text/javascript">
 $(document).ready(function(){
  var text =$('#text').html();
  if(text.length>20){
   $('#text').html(text.substr(0,20)+'...') ;
  }
 });

Css

<div id="css">
This is text to be written here
</div>

 #css {
  text-overflow: ellipsis ;
  background:green; 
  width:100px; 
  height:27px;
  display:inline-block;
  overflow: hidden;
  white-space:nowrap;
}

Thanks

Upvotes: 1

Chaitali
Chaitali

Reputation: 651

Add this css to your code:

div{
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>

Upvotes: 1

Ali Gajani
Ali Gajani

Reputation: 15091

You have to add this to your style.

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

enter image description here

Demo

Upvotes: 3

Des Horsley
Des Horsley

Reputation: 1888

Use the overflow and text-overflow css rule

div {
  overflow: hidden
  text-overflow: hidden
}
<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>

text-overflow will only work when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap as described in the link below

This site talks about the topic well if you'd like to learn more

Upvotes: 4

fluffyBatman
fluffyBatman

Reputation: 6704

Use text-overflow: ellipsis; property with white-space: nowrap; overflow: hidden;.

So, your code will look like this

<div style="background:green; width:100px; height:27px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;">
This is text to be written here
</div>

Here is a good explanation of what's going on.

Upvotes: 2

Related Questions