How to change the styles and to expand cropped text with CSS only after button click?

Question

I want to create some HTML table/list/whatever with items like:

Some very long te... ▶
Some very long te... ▶
Some very long te... ▶

and when I click on some ▶ (2nd in the example) to get:

Some very long te... ▶
Some very long text is here
 and here, and more and more
Some very long te... ▶

and to achieve it with CSS only, without Javascript. Is it possible? How to do it? Some example?

IMHO goals could be reduced, maybe to:

expand cropped text
change styles of the container (?)

Try using the :active element of css for changing the width on click — Nemoko, Mar 04 '20 at 12:59

score 1 · Answer 1 · answered Mar 04 '20 at 12:59

You could use the text-overflow: ellipsis; for the dots and then on the button-click add a class that makes the container wider. As seen here: Overflow:hidden dots at the end

In that case the only Javascript you need is to add (and maybe remove) the class. Here's a thread explaining the Javascript part: How can I change an element's class with JavaScript?

Doing it completley without Javascript i don't think is possible since you need it the listen to the button-click.

score 1 · Accepted Answer · answered Mar 04 '20 at 13:29

You can get close with just CSS however the full text is shown on hover rather than on click of the ▶.

ul {width:150px; margin:0; padding:0; }
li {margin:0; padding:0 10px 0 0; display:block; position:relative; white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
li:after {content:"▶";position:absolute; right:0;}
li:hover {white-space: normal;
  overflow: auto;}
li:hover:after {display:none;}

<ul>
<li>Some very long text is here
 and here, and more and more.</li>
 <li>Some very long text is here
 and here, and more and more.</li>
 <li>Some very long text is here
 and here, and more and more.</li>
 </ul>

How to change the styles and to expand cropped text with CSS only after button click?

2 Answers2