2

I have this code :

<div id="new-massege">
    <div class="bs">
        <div id="text-part">
            <div id="text-messege">
                <span>hello my friend how r you ???? I miss you honey</span>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/Gkn5j/

I want with jQuery calculate value in span and if width of value bigger from parent width remove one by one letter and put ... at last sentence untill value's width of span equal to width parent element.

also my friends I want this sentence put one line not more!!! please guide me...

julia
  • 261
  • 1
  • 4
  • 8
  • 1
    have you tried `overflow: hidden;`..?? – Dipesh Parmar Sep 03 '13 at 05:33
  • yes my friend but I want this sentence to be in one line and I do short this message until self width equal parent width... – julia Sep 03 '13 at 05:36
  • 1
    @julia You want `text-overflow:ellipsis`, right? It can be done by CSS only. – Muhammad Talha Akbar Sep 03 '13 at 05:38
  • Is [**this**](http://jsfiddle.net/hari_shanx/Gkn5j/2/) what you are looking for? It uses `overflow: hidden;text-overflow: ellipsis;white-space: nowrap;` (first two already mentioned in above comments). – Harry Sep 03 '13 at 05:44
  • thanks my friend. if I want this massage to be in 2 line and has text-overflow:ellipsis (short massage and put al last ....) what I do? – julia Sep 03 '13 at 06:08
  • @julia: You just want this text to be in second line (or) do you mean the same text will be shown in two lines with first line displayed fully and second line has "..."? If you want the latter, I think it is not possible with pure CSS. It would need JS/jQuery. – Harry Sep 03 '13 at 06:13
  • my friend I want this sentence or more put in 2 line and short on and put at last ... like that link that you give me but to be 2 line??? can you guide me? – julia Sep 03 '13 at 06:22

2 Answers2

0

You just need to set the width and height of the parent div, for that define the line-height of the span to know exactly the height of 2 lines.

After that overflow: hidden does the work.

#text-messege{
    width: 100px;
    height: 40px;
    overflow: hidden;
}

#text-messege span{
    line-height: 20px;
}
hugofvs
  • 11
  • 2
0

Try this

#text-messege {
    position: relative;
    padding: 10px;
}
span {
    display: block;
    font: 14px koodak, tahoma, arial;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://jsfiddle.net/creativevilla/Eq6gR/1/

Also for multi line you can refer http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Samrat
  • 387
  • 1
  • 4
  • 13