Как уместить кнопку «показать весь текст» в одну линию с остальным текстом?

Question

[Петр Сергеев]

Есть такой код https://codepen.io/Ron3485/pen/poaOmYW?editors=1111

По клику на показать весь текст/скрыть полный текст он соответственно показывает/скрывает весь текст в блоке.
Но проблемв в том, что при состоянии, когда текст обрезан, кнопка показать весь текст находится на новой строке.
Как можно сделать, чтобы кнопка находилась на той же строке сразу после многоточия?

Comments

[Ankhena]

Позиционируйте кнопку абсолютом (или гридом) в правый нижний угол. Псевдоэлементом перед ней добавьте многоточие.
Фоном задайте фон блока.
Следите за тем, чтобы ширина блока была больше, чем кнопка + многоточие + симпатичное расстояние, чтобы всё это не выглядело по-уродски.

[Петр Сергеев]

Ankhena, спасибо, вроде получилось. Правда не совсем понял как через гриды можно сделать, там же ячейки как таблица. Сделал через абсолют:
https://codepen.io/Ron3485/pen/yLvxdRQ

Правда возник еще одитн вопрос)) Как теперь скрыть блок с кнопокй, если текста меньше чем две строки?

[Ankhena]

Петр Сергеев, гридами: блок в одну ячейку. Оба дочерних в неё. Правда, текст придется обернуть (это минус). Кнопку через -self в угол.

если текста меньше чем две строки?

Проверять на js. 100% быстро гуглится.

[Петр Сергеев]

Ankhena, спасибо. а почему вы пишите в комментариях, а не в ответе к вопросу? Я бы тогда смог указать ваше решение как верное

Answer 1

[Ankhena]

Позиционируйте кнопку абсолютом (или гридом) в правый нижний угол. Псевдоэлементом перед ней добавьте многоточие.
Фоном задайте фон блока.
Следите за тем, чтобы ширина блока была больше, чем кнопка + многоточие + симпатичное расстояние, чтобы всё это не выглядело по-уродски.

Comments

[Петр Сергеев]

Правда сейчас столкнулся с новой проблемой https://codepen.io/Ron3485/pen/yLvxdRQ
Текст обрезается на половину буквы. А хотелось бы чтобы вмещалась буква целиком, а не ее половина =(

[Петр Сергеев]

Можете пожалуйста дать код как это гридами делается, а то пробую, но у меня не выходит?
может гридами будет лучше, без обрезки

[Ankhena]

Петр Сергеев,
Каждому

grid-row: 1/2;
grid-column: 1/2

Кнопке

align-self: end;
justify-self: end;

[Ankhena]

Текст обрезается на половину буквы. А хотелось бы чтобы вмещалась буква целиком, а не ее половина =(

Тут без JS для не моноширных шрифтов никак, мне кажется.

[Петр Сергеев]

Спасибо

Answer 2

[eudkx]

button {
display: block;
}

Comments

[imko]

А чтто изменится?

Answer 3

[Владимир]

Через чекбокс, с button или a реализовать не получится
Подробнее здесь:
https://www.internet-technologies.ru/articles/mnog...

Comments

[Петр Сергеев]

Насколько я вижу, в данном примере та же самая проблема,- label следующий за текстом точно так же переносится на новую строку

Answer 4

[Tan__Y]

dobawit:
.text-block p {
display: inline;
}

Comments

[Петр Сергеев]

но тогда же текст не будет обрезаться

[Tan__Y]

ne bydet tochek, a button bydet crazy posle texta w tom meste, gde zakonchitsja text

esli nuzna knopka s prawoj storony, w odny liniju s textom, to absolutnoje pozicionirowanie s zadaniem razmerow bloka

[Петр Сергеев]

Tan__Y, спасибо. Сделал так https://codepen.io/Ron3485/pen/yLvxdRQ
правда теперь возник еще один вопрос, как скрыть кнопку, если текста меньше чем две строки?
чтобы она появлялась только если тект обрезается.