Although this question is similar to another one (Wrap a text within only two lines inside div), I couldn't find a satisfactory answer in that thread.
Here's my dilemma: I have a DIV with fixed width and height, but it needs to accommodate text of varying lengths. If the text extends beyond the first line, it should wrap to the second line; if it goes past the second line, it should be truncated with ellipses.
This is what I've tried so far:
.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
line-height: 10px;
width: 64px;
}
However, this solution doesn't handle wrapping properly; making some adjustments allows me to wrap to the second line, but then the ellipses aren't applied when it wraps further.
Among the responses in the other thread, this one was the most promising, but it added ellipses to both lines of text instead of just the second.
Is there a way to achieve this using only CSS, or will I need to use JavaScript for this task?