CODEWITHSUNDEEP
htmlcssangularjs
vkv
vkv

Reputation: 1020

How to reduce the length of the paragraph by dots(...)?

I have a p tag,

<p> best villan in the film industry</p>

i have to cut the sentence after 8 characters, but after that dots should appear. like 

 best vil...

How to make it using css? If its possible by angular js also appreciated

Upvotes: 1

Views: 556

Answers (3)

Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

Using angularjs

Define scope variable in controller

$scope.ParaValue= "best villan in the film industry"

Use scope variable in View

<p>
{{ ParaValue.length > 8 ? ParaValue.substring(0,8)+'.....' :ParaValue}}
</p>

Upvotes: 0

lanlau
lanlau

Reputation: 116

in angular you can also create a filter and pass it the number of characters you want to keep. here is an implementation example: https://github.com/sparkalow/angular-truncate

another example: jsfiddle.net/tuyyx/

Upvotes: 0

Balvant Ahir
Balvant Ahir

Reputation: 620

For this you can use text-overflow: ellipsis; property. Write like this

#content_right_head span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

Check this http://jsfiddle.net/Y5vpb/

Upvotes: 2

Related Questions