css achieve vertical center text and wrap, excessive ellipsis character display

First posted renderings

It can be seen to be centered vertically, teletext line feed character when there are fewer, more displayed ellipsis

The following code is posted

    <div class="scroll-row">
        <div class="scroll_div" style="height: 6em;line-height: 6em;font-size: 12px;display: table-cell;vertical-align: middle;text-align: center;">
            <div class="build_item" style="line-height: 2em;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                {{ item.peripheralTraffic }}
            </div>
        </div>
    </div>