I know there are a couple of ways to truncate text.
I tried the CSS way:
.truncate {
width: 225px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
But this cuts off the words halfway. Example:
Original text: This is a very long text.
Result: "This is a very ve..."
What I want: "This is a very..."
I also found a couple scripts that helps to truncate based on number of characters. (This is the one i'm currently using.)
However because my site is a responsive website, I figured the CSS method was better as I can set different widths according to screen size, but as mentioned it cuts off the words. Are there any solution for this? I'm open for css or jquery solutions.