0

If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display:

 |if i had a dime for|
 |everytime i was... |

By Using below code it working fine in IOS and android but it is not working in windows(IE 10), please help me on this.

<table>
   <tr>
      <td width="80%">
         <div style="width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none;font-size:14px;">
               if i had a dime for everytime i was told i can't                                                         
         </div>
     </td>
     <td width="20%">
          <img src=""/>
     </td>
   </tr>

user2677473
  • 21
  • 5
  • See also: http://stackoverflow.com/questions/6572330/is-it-possible-to-use-text-overflowellipsis-on-multiline-text – Spudley Aug 28 '13 at 10:45

2 Answers2

0

Your desired effect is for a multi-line text block that cuts off with an ellipsis.

Unfortunately, this isn't possible. text-overflow:ellipsis only works on a single-line. It requires you to specify white-space:nowrap (which you have done) and that forces the entire text onto a single line.

This is the standard and applies to all browsers, so I don't know how you're getting the desired effect on any browser. It certainly won't work in IE or any other current browser that I'm aware of.

There is an extension to text-overflow that allows an ellipsis on multi-line text, but it's only supported by Opera, so it's hardly worth mentioning. (but in case you are interested, the syntax is text-overflow: -o-ellipsis-lastline).

There is a pure CSS solution described here, but it's a bit complex. It might be worth a try though.

The only other option you have is some sort of javascript solution.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

edit correct myself; You need to have CSS overflow and width

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden

}

webslatesoftware
  • 231
  • 2
  • 7