Within this div, I have a long text that needs to be displayed on multiple lines based on the fixed width and height of the div. The challenge is to ensure that words do not break in the middle when moving to the next line, and also add an ellipsis at the end of the last sentence.
To achieve this using CSS:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
However, this results in displaying the text in one line even when it should span across multiple lines within the div.
An alternative approach could be:
word-wrap: break-word;
While this method breaks the words and displays the sentences on several lines as intended, it does not include an ellipsis at the end to indicate truncated text.
Is there a way to achieve the following requirements?
1) Displaying multiple sentences within the div's height
2) Preventing word breaks within sentences
3) Adding an ellipsis at the end for text truncation
For an example, refer to this jsfiddle link: https://jsfiddle.net/vghup5jf/1/ where currently only one line is displayed.