using css, want both word wrap , ellipsis once container filled vertically. according research, can have ellipsis if white-space: nowrap - give me single line.
the context parent div of known height , variable width, child a element should vertically center @ times if not @ max-height: 100%.
it seems should work if display: table in parent, , display: table-cell , max-height: xxx, text-overflow: ellipsis in child specified.
i don't think asking lot, late , may missing something. there site called still-cant-be-done-in-html5.com?
there webkit-only feature called "line clamping" can achieve think you're looking for. unfortunately, it's non-standard, , there no plans (at least i'm aware of) make part of standard.
https://css-tricks.com/line-clampin/
it accomplished using following css:
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } with code, if element's content fills more 3 lines text cut off on third line ellipsis.
there several different javascript libraries attempt accomplish similar things, can see in link i've included in answer. unfortunately, using standard css, text-overflow: ellipsis limited single line.
alternatively, there a thread "region fragments" in w3c mailing list , how can used make multiline elements have ellipsis, spec still in draft stages , years before ever makes browsers.
