Generating ellipsis AND "Read more" link with CSS
<p>[Update] It's different from this question because it's not only asking for text truncation; as i mentioned, i already have text truncation using <a href="https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/" rel="nofollow noreferrer">this approach</a>. Rather it's asking about having "read more" link only when text is truncated (using CSS only if possible).</p>

<p>Currently i'm using <a href="https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/" rel="nofollow noreferrer">this approach</a> to generate ellipsis when text overflows (when it cannot fit into one line). However, now i also want to include a 'Read More' link at the end of the line when overflow occurs and clicking that link will display all the content over multiple lines. Is this doable with CSS only?</p>

<p>btw, i saw <a href="https://stackoverflow.com/questions/26002974/css-text-ellipsis-including-more-link">this post</a>, which displays "more" link no matter text has overflown or not, which is not what i want.</p>

<p>I guess the last resort would be using javascript with a <code>resize()</code> listener that dynamically hides the overflown portion of the text and creates the link to show them.</p>

<p>Thanks!</p>