HTML5一款很棒的响应式多行文本自动截取显示控件

Responsively crop text lines，可用来显示文章或商品的介绍文字，支持自定义显示行数，多余部分被自动隐藏（裁剪），点击文本区域的右上角加号来展开全部内容。

html5, crop

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2777
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Crop copy responsively, to user-defined number of lines, then restore onclick - v2.0 (IE9+) - 22/01/2017 - M.J.Foskett - https://websemantics.uk/
var cropCopyRestore = (function(window, document) {

"use strict";

var dataAttr = "data-cropCopyRestore";
    var buttonId = "CCR_btn-";
    var ellipsis = "…"; // "\u2026"
    var clonedClass = "CCR-clone";
    var expandedClass = "CCR-expanded";
    var textClass = "CCR_txt"; // html text content class
    var copyClass = "CCR_copy"; // span added inside textClass to contain just the copy
    var iconSVG = "<span class=CCR_icon><svg class=CCR_svg focussable=false aria-hidden=true><use class=CCR_use-plus xlink:href=#icon-vert></use><use xlink:href=#icon-hori></use></svg></span>";
    var readMoreSpan = "<span class=visually-hidden> [Read more]</span>";

// Debounce window resize - https://john-dugan.com/javascript-debounce/
    var debounce = function(e, t, n) {
        var a;
        return function() {
            var r = this,
                i = arguments,
                o = function() {
                    a = null, n || e.apply(r, i)
                },
                s = n && !a;
            clearTimeout(a), a = setTimeout(o, t || 200), s && e.apply(r, i)
        }
    };

// transitionend event test and prefix - https://gist.github.com/O-Zone/7230245
    ! function(n) {
        var i = {
                transition: "transitionend",
                WebkitTransition: "webkitTransitionEnd",
                MozTransition: "transitionend",
                OTransition: "otransitionend"
            },
            t = document.createElement("div");
        for (var o in i)
            if ("undefined" != typeof t.style[o]) {
                n.transitionEnd = i[o];
                break
            }
    }(window);

// Minimal classList polyfill (for IE9) - Devon Govett - https://gist.github.com/devongovett/1381839
    "classList" in document.documentElement || !Object.defineProperty || "undefined" == typeof HTMLElement || Object.defineProperty(HTMLElement.prototype, "classList", {
        get: function() {
            function e(e) {
                return function(t) {
                    var s = n.className.split(/\s+/),
                        i = s.indexOf(t);
                    e(s, i, t), n.className = s.join(" ")
                }
            }
            var n = this,
                t = {
                    add: e(function(e, n, t) {
                        ~n || e.push(t)
                    }),
                    remove: e(function(e, n) {
                        ~n && e.splice(n, 1)
                    }),
                    toggle: e(function(e, n, t) {
                        ~n ? e.splice(n, 1) : e.push(t)
                    }),
                    contains: function(e) {
                        return !!~n.className.split(/\s+/).indexOf(e)
                    },
                    item: function(e) {
                        return n.className.split(/\s+/)[e] || null
                    }
                };
            return Object.defineProperty(t, "length", {
                get: function() {
                    return n.className.split(/\s+/).length
                }
            }), t
        }
    });

// String cropping functions

function _removeLastOccur(str, removeStr) {
        return str.substring(0, str.lastIndexOf(removeStr));
    }

function _removeTrailingPunct(str) {
        return str.replace(/[ .,!?:;"“‘'\-]+$/, "");
    }

// Display and animation functions

function _display(obj, str) {
        obj.querySelector("." + copyClass).textContent = str;
    }

function _displayCroppedText(obj) {
        _display(obj, obj.croppedText + ellipsis);
        if (!obj.innerHTML.match("visually-hidden")) {
            obj.innerHTML += readMoreSpan;
        }
    }

function _resetAttr(obj, bool) {
        obj.setAttribute("aria-expanded", bool);
    }

function _addRemainerText(obj) {

function __add(obj) {
            _display(obj, obj.fullText);
            obj.removeChild(obj.querySelector(".visually-hidden"));
            _resetAttr(obj, true);
        }

// maybe use a polyfill?
        if (window.requestAnimationFrame) {
            window.requestAnimationFrame(function() {
                __add(obj);
            });
        } else {
            __add(obj);
        }
    }

function _removeRemainerText(obj) {
        if (obj) { // Repairs an obscure "tap" condition in Chrome
            _displayCroppedText(obj);
            _resetAttr(obj, false);
        }
    }

// Set copy

function _createClone(obj, str) {
        // create an invisible clone (used to get an objects height)
        var clone = obj.cloneNode(true);
        clone.classList.add(clonedClass);
        if (clone.querySelector("." + copyClass)) {
            clone.querySelector("." + copyClass).textContent = str;
            obj.parentNode.insertBefore(clone, obj.nextSibling);
            clone.initialHeight = clone.clientHeight;
        }
        return clone;
    }

function _getCroppedHeight(obj) {
        var clone = _createClone(obj, obj.croppedText);
        obj.parentNode.removeChild(clone);
        return clone.initialHeight;
    }

function _getFullHeight(obj) {
        var clone = _createClone(obj, obj.fullText);
        obj.parentNode.removeChild(clone);
        return clone.initialHeight;
    }

function _getCroppedText(obj) {
        var txtArr = obj.fullText.split(" ");
        var i = 0;
        var lines = 1;
        var clone = _createClone(obj, txtArr[i] + " ");
        var textObj = clone.querySelector("." + copyClass);

for (i = 1; i < txtArr.length; i++) {

textObj.textContent += txtArr[i] + ellipsis;

if (clone.clientHeight !== clone.initialHeight) {

if (lines + "" === obj.noOfLines) {

_display(clone, _removeLastOccur(textObj.textContent, txtArr[i] + ellipsis));

obj.croppedMaxHeight = clone.clientHeight;
                    obj.parentNode.setAttribute("style", "max-height:" + obj.croppedMaxHeight + "px");
                    break;
                }
                lines++;
                clone.initialHeight = clone.clientHeight;
            }

// Bit of an assumption
            _display(clone, textObj.textContent.replace(txtArr[i] + ellipsis, txtArr[i] + " "));

}

_display(clone, _removeTrailingPunct(textObj.textContent));
        obj.parentNode.removeChild(clone);
        return textObj.textContent;
    }

// Handle events

function _removeText(event) {
        var obj = event.target.p;
        delete event.target.p;
        event.target.removeEventListener(window.transitionEnd, _removeText);
        _removeRemainerText(obj);
    }

function _clicked(event) {

var obj = _getButtonObj(event.target);

if (obj) {
            if (obj.getAttribute("aria-expanded") === "true") {
                obj.parentNode.style.maxHeight = _getCroppedHeight(obj) + "px";
                obj.parentNode.classList.remove(expandedClass);
                obj.parentNode.p = obj;
                if (window.transitionEnd) {
                    obj.parentNode.addEventListener(window.transitionEnd, _removeText, false);
                } else {
                    _removeRemainerText(obj);
                }
            } else {
                obj.parentNode.style.maxHeight = _getFullHeight(obj) + "px";
                obj.parentNode.classList.add(expandedClass);
                _addRemainerText(obj);
            }
        }

event.preventDefault();
    }

function _keyPressed(event) {
        // Enter or space key
        if (event.which === 13 || event.which === 32) {
            _clicked(event);
        }
    }

function _addEvents(obj) {
        obj.addEventListener("click", _clicked, false);
        obj.addEventListener("keydown", _keyPressed, false);
    }

function _removeEvents(obj) {
        obj.removeEventListener("click", _clicked);
        obj.removeEventListener("keydown", _keyPressed);
    }

// Initialisation

function _initialiseAttributes(obj, i) {
        var str = obj.getAttribute(dataAttr);
        obj.noOfLines = (/^([1-9]\d*)$/.test(str)) ? str : "1"; // Returns 1 - 9 only
        obj.fullText = obj.textContent.trim();
        obj.setAttribute("id", obj.id || buttonId + i);
        obj.setAttribute("role", "button");
        obj.setAttribute("tabindex", "0");
        obj.setAttribute("aria-controls", obj.id);
    }

function _prepareContent(obj) {

// Quick and dirty - replace if you wish
        obj.innerHTML = iconSVG + "<span role=alert aria-live=assertive class=" + copyClass + ">" + obj.innerHTML + "</span>";
    }

function start() {

var objs = document.querySelectorAll("[" + dataAttr + "]");
        var i = objs.length;
        var obj;

while (i--) {

obj = objs[i];

// In case it's a resize call rather than initialisation
            if (obj.fullText) {
                obj.parentNode.classList.remove(expandedClass);
                _removeEvents(obj);
            } else {
                _prepareContent(obj);
                _initialiseAttributes(obj, i);
            }

// Reset, or initialise, common attributes
            _resetAttr(obj, false);
            obj.croppedText = _getCroppedText(obj);

_displayCroppedText(obj);
            _addEvents(obj);
        }
    }

start();
    window.addEventListener("resize", debounce(start, 100, false), false);

}(window, document));

window.addEventListener("load", cropCopyRestore, false);

编译

CSS

/* Generic local styling */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    line-height: 1.5;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 36rem;
    font-family: sans-serif;
    background-image: url("data:image/svg+xml;utf8,<svg style='opacity:.75' width='1200' height='256' viewBox='0 0 1200 256' xmlns='http://www.w3.org/2000/svg'><defs><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='.4'></feTurbulence></filter></defs><rect height='256' width='1200' filter='url(%23noise)' opacity='0.3'/></svg>");
    background-color: #1a1a1a;
    color: #fff;
}
h1,
h2,
h3 {
    font-weight: 100;
}
h2,
h3 {
    margin: 3rem 0 1rem;
}
h1 {
    font-size: 1.625rem;
    text-align: center;
    margin: 2rem 0 1rem;
}
h2 {
    font-size: 1.375rem
}
h3 {
    font-size: 1.25rem
}
nav {
    margin: 2rem auto;
    padding: .25rem;
    background-color: #1a1a1a;
    display: flex;
    justify-content: space-around
}
ul {
    margin: 1rem 0;
    padding-left: 1rem
}
li {
    margin: .75rem 0
}
p {
    margin: 1rem 0
}
img {
    border: 0 solid;
    vertical-align: baseline;
    max-width: 100%;
}
button {
    cursor: pointer;
}
code,
kbd {
    font: 100 1rem monospace, monospace;
    padding: 0.1em .25em;
    background-color: #1a1a1a;
}
/* Links revisited */

a {
    color: #fff;
    padding: 0 1px;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, .25);
    transition: all .3s ease-out;
}
a:visited {
    color: #eee;
    border-bottom-color: rgba(255, 255, 255, .5);
}
a:hover,
a:focus,
a:active {
    color: #000;
    background-color: #fff;
    border-bottom-color: #000;
    box-shadow: 0 0 0 .125em #fff;
}
a:focus {
    outline: 0 solid;
}
::-moz-selection {
    background: #bdf;
    color: #000;
}
::selection {
    background: #bdf;
    color: #000;
}
button {
    display: inline-block;
    color: #000;
    background-color: #fff;
    padding: 0 .25em;
    text-align: left;
    vertical-align: bottom;
    font: inherit;
    font-size: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: button;
    overflow: hidden;
    transition: all .3s ease-out;
}
button:hover,
button:focus {
    color: #fff;
    background-color: #000;
}
.report {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: .25rem 1.25rem .25rem .5rem;
    color: #fff;
    background-color: #000;
    max-height: calc(100vh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
}
.report_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid currentColor;
}
.report_svg {
    display: block;
    fill: currentColor;
}
.smaller {
    font-size: smaller;
    text-align: center;
    border: 1px solid #777;
    padding: .5rem;
    background-color: #1a1a1a
}
/* Generics */

code {
    display: block;
}
pre {
    margin: 0;
    overflow-x: scroll;
}
/* Helper classes */

* {
    box-sizing: border-box;
}
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
/* Main styles */

.CCR {
    /* Animated via JS embedding inline max-height values */
    /* Note: 1ms shorter than SVG rotation duration */
    
    overflow: hidden;
    transition: max-height .6s ease-out;
}
.CCR_txt {
    /* Optional, adjust to meet individual project */
    
    color: #fff;
    background-color: #000;
    padding: .75rem 1rem;
}
.CCR_txt[role="button"] {
    cursor: pointer;
}
/* Icon styles */

.CCR_icon {
    /* SVG container (required) */
    /* Fixes Safari's focus/hover state box-shadow */
    /* Override colours here if required: */
    /* color: #fff; */
    
    background-color: #3a3a3a;
    float: right;
    margin: 0 0 .75rem .75rem;
    /* Today, we look through the round window */
    
    border-radius: 100%;
    overflow: hidden;
    display: block;
    width: 1.5em;
    height: 1.5em;
    -webkit-transition: box-shadow .3s ease-out;
    transition: box-shadow .3s ease-out;
}
.CCR_svg {
    background-color: transparent;
    color: currentColor;
    border: .125em solid currentColor;
    border: .125em solid #3a3a3a;
    border-radius: 100%;
    display: block;
    width: 100%;
    height: 100%;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: currentColor;
    /* Note: 1ms longer than SVG rotation duration */
    
    -webkit-transition: transform .7s ease-out;
    transition: transform .7s ease-out;
}
/* Icon animation */

.CCR-expanded .CCR_svg {
    /* 360deg provides a slower rotation */
    
    transform: rotateZ(180deg);
}
.CCR_use-plus {
    /* Note: same as SVG rotation duration */
    
    -webkit-transition: opacity .7s ease-out;
    transition: opacity .7s ease-out;
}
.CCR-expanded .CCR_use-plus {
    opacity: 0;
}
/* Acts as focus state indicator for the control */
/* A requirement to meet WCAG 2 */

.CCR_txt:hover > .CCR_icon,
.CCR_txt:focus > .CCR_icon {
    box-shadow: 0 0 0 4px #99BAD9;
}

HTML

<h1>Responsively crop copy, restore onclick via sliding drop-down animation</h1>

<p>
    Responsively crop content copy down to a user-defined number of lines.
    <br> Click to fully restore the content via a sliding drop-down animation.
    <br> All delivered in an accessible manner.
    <br>
</p>

<p>As used on Tesco's <a href="https://www.tesco.com/food-love-stories/">Food Love Stories</a>
</p>

<p>GitHub repo available: <a href="https://github.com/2kool2/crop-copy-slide-restore" target=_blank title="[new window]">crop-copy-slide-restore</a>
</p>

<h2>Single line crop example</h2>

<div class=CCR>
        <div class=CCR_txt data-cropCopyRestore>
            If you’ve seen our recent TV ad, you’ll be in on our Food Love Story about ‘David’s’ shameful secret: when he met his wife, he fibbed about sharing her love of spicy food. 15 years later, he hasn’t come clean, but he’s still making his wife her favourite
            curry – with a sneaky dollop of cooling yogurt for him.
        </div>
    </div>

<h2>Two line crop example</h2>

<div class=CCR>
        <div class=CCR_txt data-cropCopyRestore=2>
            Sometimes it’s the undemandingly easy, everyday recipes that deliver the most joy. For ‘Iain’ and his dad, from our Food Love Story, it’s croque monsieur. They first had it on a joint trip to France and, since then, it’s become their favourite weekend
            lunch. ‘Iain’s’ made a few changes to it along the way (bonjour, wafer-thin roast turkey) – but for him and his dad, it’s most definitely ‘proper’.
        </div>
    </div>

</section>

<h2>Features</h2>
<ul>
    <li>User-defined number of lines initially displayed, defined in the HTML.</li>
    <li>JavaScript automagically writes an accurate inline max-height property which is animated via CSS.</li>
    <li>Resizing the viewport recalculates the length of text displayed and adjusts the max-height values.</li>
    <li>Utilises <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and live region to help meet <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2 (accessibility).</li>
    <li>Vanilla JavaScript and less than 2kB minified &amp; gzipped.</li>
    <li>Support down to IE9.</li>
</ul>

<h2>Status</h2>
<p>
    Cross-browser tested:
    <br> Mac: Firefox Dev, Chrome, Safari, Opera Dev.
    <br> PC: Firefox Dev, Chrome, IE9 - Edge.
</p>
<p>
    In Live testing.
    <br> To be followed by full accessibility testing.
</p>

Responsively crop text lines，可用来显示文章或商品的介绍文字，支持自定义显示行数，多余部分被自动隐藏（裁剪），点击文本区域的右上角加号来展开全部内容。

html5, crop

编辑器支持Emmet

快捷键

Responsively crop text lines，可用来显示文章或商品的介绍文字，支持自定义显示行数，多余部分被自动隐藏（裁剪），点击文本区域的右上角加号来展开全部内容。

html5, crop

HTML5 GSAP一款很棒的竖向动画广告条模板

HTML5 很棒的一款智慧家庭应用程序

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：