Как добавить троеточие в первую строчку текста?

Question

[zhenek_3]

Здравствуйте. Есть страничка: https://floorconcept.tilda.ws/partner

В самом низу есть блок с текстом, который раскрывается и закрывается через нажатие на кнопку "Подробнее". Код выглядит следующим образом:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
$(document).ready(function() {
    let block = $('#rec779589211'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 1,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more"><u>Подробнее</u></a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less"><u>Скрыть</u></a>'
    });
});
</script>

<style>
.read-more,
.read-less {
    color: #342a23 !important;
    font-size: 24px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
}

#rec779589211 .t-text {
    margin-bottom: 10px;
    text-align: justify;
}
</style>

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

Comments

[Антон]

<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
$(document).ready(function() {
    let block = $('#rec779589211'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 1,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more"><u>Подробнее</u></a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less"><u>Скрыть</u></a>',
        afterToggle: function(trigger, element, expanded) {
            if(expanded) {
                element.removeClass('collapsed');
            } else {
                element.addClass('collapsed');
            }
        }
    });
    
    // Добавляем класс collapsed изначально
    longText.addClass('collapsed');
});
</script>

<style>
.read-more,
.read-less {
    color: #342a23 !important;
    font-size: 24px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
}

#rec779589211 .t-text {
    margin-bottom: 10px;
    text-align: justify;
}

#rec779589211 .t-text.collapsed {
    position: relative;
    overflow: hidden;
}

#rec779589211 .t-text.collapsed::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 3px;
    background: white; /* Цвет фона, подберите под ваш дизайн */
}
</style>

[zhenek_3]

Антон, мысль верная, только нужно чтобы многоточие появлялось после последнего слова или буквы, а не накладывалось просто поверх текста

[Антон]

zhenek_3,

<script>
$(document).ready(function() {
    let block = $('#rec779589211'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 1,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more"><u>Подробнее</u></a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less"><u>Скрыть</u></a>',
        beforeToggle: function(trigger, element, expanded) {
            if (!expanded) { // Перед сворачиванием
                element.css('height', '');
                let text = element.text();
                let truncated = text.slice(0, text.lastIndexOf(' ', element.height() / rowHeight * 50)); // Примерное количество символов
                element.html(truncated + '<span class="ellipsis">...</span>');
            }
        },
        afterToggle: function(trigger, element, expanded) {
            if (expanded) { // После разворачивания
                element.html(element.data('originalText'));
            }
        }
    });
    
    longText.data('originalText', longText.html());
    longText.readmore('toggle');
});
</script>

<style>
.read-more,
.read-less {
    color: #342a23 !important;
    font-size: 24px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
}

#rec779589211 .t-text {
    margin-bottom: 10px;
    text-align: justify;
    position: relative;
    overflow: hidden;
}

.ellipsis {
    padding-left: 3px;
}

#rec779589211 .readmore-js-toggle {
    margin-top: 10px;
}
</style>

[zhenek_3]

Антон, сработал первый код

<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
$(document).ready(function() {
    let block = $('#rec779589211'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 1,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more"><u>Подробнее</u></a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less"><u>Скрыть</u></a>',
        afterToggle: function(trigger, element, expanded) {
            if(expanded) {
                 element.removeClass('collapsed');
            } else {
                element.addClass('collapsed');
            }
        }
    });
    
    // Добавляем класс collapsed изначально
    longText.addClass('collapsed');
});
</script>

<style>
.read-more,
.read-less {
    color: #342a23 !important;
    font-size: 24px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
}

#rec779589211 .t-text {
    margin-bottom: 10px;
    text-align: justify;
}

#rec779589211 .t-text.collapsed {
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
</style>

но при открытии не хочет раскрывать полностью текст. Только первый абзац

Answer 1

[Сергей delphinpro]

Если строка одна, то в закрытом состоянии

.closed {
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}

Comments

[WbICHA]

А если для нескольких строк, то, по моему, как-то так:

display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

[zhenek_3]

Сергей delphinpro да, но только после него не хочет полностью раскрываться текст

[Сергей delphinpro]

zhenek_3, ну так надо убирать эти стили, когда блок открывается.

[historydev]

Сергей delphinpro, ахах)