HTML_ Ellipsis_ <td> <pre>

Question

I'm extremely curious about this matter.

---

<table border="1">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>

<tr>
<td>
    <pre style="text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
           1. Lorem ipsum is simply dummy text of the printing
           2. and typesetting industry. 
           3. lorem ipsum has been the industry's standard dummy 
           4. text ever since
           5. the 1500s when an unknown printer took
           6. a galley of type and screambled it to make a type
           7. specimen book. it has survived not only five
    </pre>
    </td>
</tr>
</table>

---

to make result (expected result : <td>)

---

   1. Lorem ipsum is simply dummy text of the printing
   2. and typesetting industry. 
   3. lorem ipsum has been the industry's standard dummy 
   4. text ever since ...

---

but now , my result is

---

   1. Lorem ipsum is simply dummy text of the printing 2. and typesetting industry.3. lorem ipsum has been the industry's standard dummy 4. text ever since ...

---

Why is it connected?

In this situation <td> and <pre> class is obstacle of use "ellipsis" in multi-line. So how can I overcome this problem?

---

Enviroment : jquery-2.0.3.

ps. please except related 'jqery.dotdotdot' plug-in

---

Answer 1

The issue is with the white-space:nowrap; CSS code. This is overriding the preformatted text. Check it in this fiddle.