Biblioteca de recorte de texto accesible y adaptable-cropCopyRestore. js

Vista prévia

Descripción

cropCopyRestore. js es una biblioteca de JavaScript independiente que permite truncar texto largo por líneas y proporciona una manera accesible para alternar el contenido truncado con un efecto deslizante suave.

Funcionamiento

Envuelve tu texto largo en elementos DIV como se muestra a continuación. El atributo ' Data-cropCopyRestore ' se utiliza para especificar el número de líneas que le gustaría truncar el texto.

<div class=CCR>

<div class=CCR_txt data-cropCopyRestore=2>


Long Text Here

</div>
</div>

Incluya el archivo JavaScript principal ' cropCopyRestore. XX. min. js ' al final de su documento HTML.

<script src="js/cropCopyRestore.2.1.min.js"></script>

Las clases auxiliares.

* { box-sizing: border-box; }

.visually-hidden {

position: absolute !important;

height: 1px;

width: 1px;

overflow: hidden;

clip: rect(1px, 1px, 1px, 1px);
}

Los principales estilos CSS.

.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; }

Los estilos de icono.

.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: 2px 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;
}

La animación del icono.

.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; }