jquery - not able to crop a link and ending it with three dots -

I am trying to create a link to crop in my web page. After the link crop (it has some text after all), I want the link ends with three dots ( ... ).

Below is my code, can you please tell me where the problem is

  .text-no-overflow {white-space: nowrap; Hidden flurry; Text-overflow: oval; Border: Solid 2px blue; }  

  & lt; Link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com /bootstrap/3.3.2/css/bootstrap.min.css"> & Lt; Script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" & gt; & Lt; / Script & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-4 text-no-overflow" & gt; & Lt; H3 class = "media-title" & gt; & Lt; A href = "#" & gt; It's too long, it's too long, it's too long, it's too long It's too long It's too long It's too long Long time it's too long & lt; / A & gt; & Lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-4" & gt; & Lt; H3 class = "media-title" & gt; & Lt; A href = "#" & gt; It's too long, it's too long, it's too long, it's too long, it's too long, it's too long, it's too long, it's too long & lt; / A & gt; & Lt; / H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt;