CSS 2 Line Text Wrap Ellipsis

Question

I'm trying to add a fixed size div that would text wrap and also show ellipsis on overflow.

Is this possible?

Here is where I'm at so far:

.mydiv {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 14px;
        line-height: 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px !important;
        height: 40px !important;
        border: 1px solid #000000;
}

<div class="mydiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

As best as I can tell, this is not possible, no: all support for text-overflow: ellipsis requires white-space: nowrap (which obviously constrains it to a single line, and doesn't fulfill your first requirement).

For multiline wrapping, then ellipsis, I think you're going to be stuck with a javascript solution (for example jTruncate ).