Dyclesopespox
New Member
I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a \[code\]div\[/code\] which has some text. The child is \[code\]table-cell\[/code\] and parent is \[code\]table\[/code\] property to allow child class to have text expanding vertically as it grows.Now I want the text to be truncated in the last line. I thought to use \[code\]text-overflow\[/code\] and \[code\]max-height\[/code\] property for this, but not working. Any ideas on this?Classes:\[code\].parentclass { position: absolute; top: 110px; left: 165px; width: 470px; height: 260px; text-align: center; display: table; background-image: url(../images/Notification_BG.png);}.childclass { display:table-cell; vertical-align: middle; text-align: center; padding-left: 20px; padding-right: 20px; max-height: 260px; overflow: hidden; text-overflow: ellipsis; border: 1px solid blue; font-family: Arial; font-size: 28px; color: white;}\[/code\]