I'm not sure using CSS is the best way to "restrict the number of lines" being displayed. This would cause at least two big problems which I could see:
It's important to understand you're still downloading all of the text, but it's being hidden by the
overflow: hidden; attribute.
- The text is still being downloaded, which will be a waste because Users are downloading information they can't read and they're unnecessarily downloading data which might be bad for UX
- You could use the
height: 123px; or
width: 123px; attributes, but this might not be consistent between different view ports. You may end up showing more than you intend or less than you intend.
If you must use CSS, you could use something like below:
-webkit-line-clamp: 3; /* Limit to 3 lines */
This is a bit more friendly in the fact it shouldn't affect responsiveness, but you only have control over the number of lines, rather than the character limit.
You can see a nice little demo here: https://codepen.io/srekoble/pen/EgmyxV
There is an argument to say this is better asked on Stack Overflow, given this is CSS rather than anything Salesforce related until you do choose to code down the Lightning JS/Apex route.