Форум

maxim1978 · #1 (**permalink**) 30.05.2021, 14:51

Как показать текст который скрыт ?

Я текст обрезал и в конце приплюсовал три точки после чего вставил span с текстом Показать весь и при клике на этом span должен показаться весь текст и именно вот это у меня не получилось .

Как такое делается ?

Моя провальная попытка: https://codepen.io/topicstarter/pen/rNyYmqP

рони · #2 (**permalink**) 30.05.2021, 15:23

maxim1978,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            width: 380px;
        }
        p span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
        p span:hover {
            color: darkblue;
        }
    </style>
</head>
<body>
    <div class="item">
        <p class="description">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
        </p>
    </div>
    <script>
        document.querySelectorAll(".item p").forEach(function(el) {
            el.dataset.html = el.innerHTML
            el.innerHTML = el.innerHTML
                .split("", 240)
                .join("")
                .toLowerCase()
                .padEnd(245, ".");
            el.insertAdjacentHTML("beforeend", "<span>Показать весь</span>");
        });
        document.addEventListener("click", function({ target }) {
            let p = target.closest("p.description"), html;
            if (p && (html = p.dataset.html)) p.innerHTML = html;
        });
    </script>
</body>
</html>

maxim1978 · #3 (**permalink**) 30.05.2021, 15:25

Сообщение от рони

maxim1978,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            width: 380px;
        }
        p span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
        p span:hover {
            color: darkblue;
        }
    </style>
</head>
<body>
    <div class="item">
        <p class="description">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
        </p>
    </div>
    <script>
        document.querySelectorAll(".item p").forEach(function(el) {
            el.dataset.html = el.innerHTML
            el.innerHTML = el.innerHTML
                .split("", 240)
                .join("")
                .toLowerCase()
                .padEnd(245, ".");
            el.insertAdjacentHTML("beforeend", "<span>Показать весь</span>");
        });
        document.addEventListener("click", function({ target }) {
            let p = target.closest("p.description"), html;
            if (p && (html = p.dataset.html)) p.innerHTML = html;
        });
    </script>
</body>
</html>

спасибо огромное ...

рони · #4 (**permalink**) 30.05.2021, 15:44

maxim1978,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            width: 380px;
        }
        p+span {
            border-radius: 4px;
            padding: 0.2em 0.6em;
            border: 1px solid #009ce2;
            background-color: #00acff;
            color: #fff;
            font-size: 0.8em;
            cursor: pointer;
        }
        p+span:hover {
            color: darkblue;
        }
        p.description.limit {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
        }
        p.description+span {
            display: none;
        }
        p.description.limit+span {
            display: inline;
            float: right;
        }
    </style>
</head>
<body>
    <div class="item">
        <p class="description">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
        </p>
    </div>
    <script>
        document.querySelectorAll(".item p").forEach(function(el) {
            let { length } = el.innerHTML;
            if (length > 240) {
                el.insertAdjacentHTML("afterend", "<span class='open'>Показать весь текст</span>");
                el.classList.add("limit");
            }
        });
        document.addEventListener("click", function({ target }) {
            let span = target.closest("span.open");
            let p = span.previousElementSibling;
            if (p) p.classList.remove("limit");
        });
    </script>
</body>
</html>

рони · #5 (**permalink**) 30.05.2021, 15:45

maxim1978,
не копируйте текст целиком, если в этом нет особой необходимости, есть цитирование.

Форум

Справочник

Discord чат

Курсы javascript