Multilines text-overflow ellipsis

How to make text-overflow ellipsis working with multiple lines content

by gudoy

HTML

<div class="test1">Paris (75), Paris 1er (75001), Paris 2ème (75002),  Paris 3ème (75003),  Paris 4ème (75004),  Paris 5ème (75005),  Paris 6ème (75006), Paris 7ème (75007), Paris 8ème (75008), Paris 9ème (75009), Paris 10ème (75010), Paris 11ème (75011), Paris 12ème (75012) </div>

<div class="test2">Paris (75), Paris 1er (75001), Paris 2ème (75002),  Paris 3ème (75003),  Paris 4ème (75004),  Paris 5ème (75005),  Paris 6ème (75006), Paris 7ème (75007), Paris 8ème (75008), Paris 9ème (75009), Paris 10ème (75010), Paris 11ème (75011), Paris 12ème (75012) </div>

<div class="fix">Paris (75), Paris 1er (75001), Paris 2ème (75002),  Paris 3ème (75003),  Paris 4ème (75004),  Paris 5ème (75005),  Paris 6ème (75006), Paris 7ème (75007), Paris 8ème (75008), Paris 9ème (75009), Paris 10ème (75010), Paris 11ème (75011), Paris 12ème (75012)</div>

CSS

/* text-overflow:ellipsis; and overflow:hidden; are not enough for multilines content */
div { overflow:hidden; margin:20px 0; border:1px solid red; text-overflow:ellipsis; }

/* Better with a max-height BUT ellipsis are still missing */
.test2 { max-height:1.4em; }

/* FIX: use white-space:nowrap; AND a too small width in pixels AND min-width:100%; */
.fix { width:1px; min-width:100%; white-space:nowrap; border:1px solid green; }