Only text-overflow the Last Line in Multi-Line

Question

I'm trying to make a <div> have multiple lines but cut off the content with an ellipsis on the last line before it overflows, like so:

+----------------------------+
|Lorem ipsum dolor sit amet, |
|consectetuer adipscing elit,| (Desired Result)
|sed do eiusmod tempor inc...|
+----------------------------+ 

A few attempts ago, I could not make it work and the div looked a little something like:

+----------------------------+
|Lorem ipsum dolor sit amet, |
|consectetuer adipscing elit,| (text-overflow disabled)
|sed do eiusmod tempor       |
+----------------------------+

Now I've managed to make text-overflow: ellipsis; work, but the div now looks like:

+----------------------------+
|Lorem ipsum dolor sit ame...|
|                            | (text-overflow enabled)
|                            |
+----------------------------+

This does NOT help, because it's asking to do this:

+----------------------------+
|Lorem ipsum dolor sit ame...|
|Ut enim ad minim veniam, ...| (NOT what I want)
|Duis aute irure dolor in ...|
+----------------------------+

Here's the code in question:

#page {
    width: 550px;
    height: 900px;
    margin: none;
    padding: none;
    overflow: hidden;
    position: relative;
}

#pageHeader {
    position: absolute;
    top: 0px;
    width: 550px;
    height: 900px;
    margin: none;
    padding: none;
    overflow: hidden;
    position: relative;
}

#pageSubtitle {
    font-size: 17px;
    line-height: 16px;
    width: 480px;

    height: 48px;
    margin: 0 auto;
    padding-left: 4px;
    border-left: 3px solid black;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div id="page">
    <div id="pageHeader">
        <div id="pageSubtitle">
            {Description}
        </div>
    </div>
</div>

    #page {
        width: 550px;
        height: 900px;
        margin: none;
        padding: none;
        overflow: hidden;
        position: relative;
    }

    #pageHeader {
        position: absolute;
        top: 0px;
        width: 550px;
        height: 900px;
        margin: none;
        padding: none;
        overflow: hidden;
        position: relative;
    }

    #pageSubtitle {
        font-size: 17px;
        line-height: 16px;
        width: 480px;

        height: 48px;
        margin: 0 auto;
        padding-left: 4px;
        border-left: 3px solid black;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

    
}

    <div id="page">
        <div id="pageHeader">
            <div id="pageSubtitle">
                {Description}
            </div>
        </div>
    </div>