Как изменить стили и расширить обрезанный текст с помощью CSS только после нажатия кнопки?

Question

Я хочу создать HTML таблицу / список / что угодно с такими элементами, как:

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

, и когда я нажимаю на ▶ (2-й в примере), чтобы получить:

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

и достичь этого только с CSS, без Javascript. Является ли это возможным? Как это сделать? Некоторые примеры?

ИМХО цели могут быть уменьшены, например:

• развернуть обрезанный текст
• изменить стили контейнера (?)

Answer 1

Вы можете приблизиться с помощью всего CSS, однако полный текст отображается при наведении, а не при нажатии ▶.

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>

Answer 2

Вы можете использовать text-overflow: ellipsis; для точек, а затем по нажатию кнопки добавить класс, который сделает контейнер шире. Как видно здесь: Переполнение: скрытые точки в конце

В этом случае вам нужно только Javascript добавить (и, возможно, удалить) класс. Вот нить, объясняющая часть Javascript: Как я могу изменить класс элемента с помощью JavaScript?

Делать это полностью без Javascript Я не думаю, что это возможно, поскольку вы это нужно слушать при нажатии кнопки.