separar - salto de linea en title html
Aplicando puntos suspensivos al texto multilínea (25)
¿Hay alguna solución para agregar puntos suspensivos en la última línea dentro de un div con una altura de fluido (20%)?
Encontré la función
-webkit-line-clamp
en CSS, pero en mi caso el número de línea dependerá del tamaño de la ventana.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>
Tengo este JSFiddle para ilustrar el problema. https://jsfiddle.net/96knodm6/
Acabo de jugar un poco con este concepto. Básicamente, si está de acuerdo con tener potencialmente un píxel más o menos cortado de su último personaje, aquí hay una solución css y html pura:
La forma en que esto funciona es colocando absolutamente un div debajo de la región visible de una ventana gráfica. Queremos que el div se compense en la región visible a medida que crece nuestro contenido. Si el contenido crece demasiado, nuestro div se compensará demasiado alto, por lo que el límite superior de la altura de nuestro contenido puede crecer.
HTML:
<div class="text-container">
<span class="text-content">
PUT YOUR TEXT HERE
<div class="ellipsis">...</div> // You could even make this a pseudo-element
</span>
</div>
CSS:
.text-container {
position: relative;
display: block;
color: #838485;
width: 24em;
height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like ''j''
overflow: hidden;
white-space: normal;
}
.text-content {
word-break: break-all;
position: relative;
display: block;
max-height: 3em; // This prevents the ellipsis element from being offset too much. It should be 1 line height greater than the viewport
}
.ellipsis {
position: absolute;
right: 0;
top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
text-align: left;
background: white;
}
He probado esto en Chrome, FF, Safari e IE 11.
Puede consultarlo aquí: http://codepen.io/puopg/pen/vKWJwK
Incluso podrías aliviar el corte abrupto del personaje con algo de magia CSS.
EDITAR: Supongo que una cosa que esto impone es un salto de palabra: un descanso, ya que de lo contrario el contenido no se extendería hasta el final de la ventana gráfica. :(
Bueno, podrías usar la función de sujeción de línea en CSS3.
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 25px;
height: 52px;
max-height: 52px;
font-size: 22px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Asegúrese de cambiar la configuración como si fuera suya.
Desafortunadamente no con el estado actual de las cosas en CSS.
La representación de puntos suspensivos tiene un requisito previo
white-space:nowrap
que significa efectivamente: los puntos suspensivos se dibujan solo en contenedores de texto de una sola línea.
Después de buscar en Internet y probar muchas de estas opciones, la única manera de asegurarme de que esté cubierto correctamente con soporte para, por ejemplo, es a través de JavaScript, creé una función de bucle para revisar los elementos de publicación que requieren truncamiento de varias líneas.
* tenga en cuenta que usé Jquery, y requiere que su clase post__items tenga una altura máxima fija.
// loop over post items
$(''.post__items'').each(function(){
var textArray = $(this).text().split('' '');
while($(this).prop(''scrollHeight'') > $(this).prop(''offsetHeight'')) {
textArray.pop();
$(this).text(textArray.join('' '') + ''...'');
}
});
Después de muchos intentos, finalmente terminé con un js / css mixto para manejar desbordamientos de líneas múltiples y simples.
Código CSS3:
.forcewrap { // single line ellipsis
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-moz-binding: url( ''bindings.xml#ellipsis'' );
white-space: nowrap;
display: block;
max-width: 95%; // spare space for ellipsis
}
.forcewrap.multiline {
line-height: 1.2em; // my line spacing
max-height: 3.6em; // 3 lines
white-space: normal;
}
.manual-ellipsis:after {
content: "/02026"; // ''...''
position: absolute; // parent container must be position: relative
right: 10px; // typical padding around my text
bottom: 10px; // same reason as above
padding-left: 5px; // spare some space before ellipsis
background-color: #fff; // hide text behind
}
y simplemente verifico con el código js si hay desbordamientos en divs, como este:
function handleMultilineOverflow(div) {
// get actual element that is overflowing, an anchor ''a'' in my case
var element = $(div).find(''a'');
// don''t know why but must get scrollHeight by jquery for anchors
if ($(element).innerHeight() < $(element).prop(''scrollHeight'')) {
$(element).addClass(''manual-ellipsis'');
}
}
Ejemplo de uso en html:
<div class="towrap">
<h4>
<a class="forcewrap multiline" href="/some/ref">Very long text</a>
</h4>
</div>
Eché un vistazo a cómo YouTube lo resuelve en su página de inicio y lo simplifiqué:
.multine-ellipsis {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
Esto permitirá 2 líneas de código y luego agregará puntos suspensivos.
Gist: https://gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b
Este man tiene la mejor solución. Solo css:
.multiline-ellipsis {
display: block;
display: -webkit-box;
max-width: 400px;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Finalmente encontré una solución para hacer lo que quiero.
Como
p
paragraphe y
article
el envoltorio.
Si desea aplicar puntos suspensivos a
p
según la altura del
article
(que también depende de la altura de la ventana), debe obtener la
height
del
article
, la
line-height
de la
line-height
de
p
y luego
articleHeight/lineHeight
para encontrar el número de
line-clamp
que se puede agregar dinámicamente entonces.
Lo único es que la
line-height
la
line-height
debe declararse en el archivo css.
Verifique el siguiente código.
Si cambia la altura de la ventana, la
line-clamp
cambiará.
Puede ser genial crear un complemento con el objetivo de hacerlo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>
p {
display: block;
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>
Mi solución que funciona para mí para puntos suspensivos multilínea:
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
Para CSS incorrecto no es compatible con la sujeción multilínea entre navegadores, solo el kit web parece estar presionándolo.
Puede intentar usar una biblioteca de puntos suspensivos de Javascript simple como Ellipsity en github, el código fuente es muy limpio y pequeño, por lo que si necesita hacer cambios adicionales, debería ser bastante fácil.
Por favor, consulte este CSS para los puntos suspensivos en texto de varias líneas
body {
margin: 0;
padding: 50px;
}
/* mixin for multiline */
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
content: ''...'';
position: absolute;
right: 0;
bottom: 0;
}
.block-with-text:after {
content: '''';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
}
<p class="block-with-text">The Hitch Hiker''s Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can''t see it, it can''t see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
Pros:
+ Navegador cruzado (IE11, Edge, Chrome, Firefox, Safari, etc.)
+ Aspecto más natural
Contras:
- Agrega muchos elementos adicionales al DOM
No estaba satisfecho con ninguna de las soluciones que había visto. La mayoría de ellos usan line-clamp que actualmente solo es compatible con webkit. Así que jugué con eso hasta que encontré una solución. Esta solución javascript pura debe ser compatible con IE10 y superior y todos los navegadores modernos. Esto no se ha probado fuera del espacio de ejemplo a continuación.
Creo que esta es una buena solución. La gran advertencia es que crea un espacio para cada palabra dentro del contenedor, lo que afectará el rendimiento del diseño, por lo que su kilometraje puede variar.
//This is designed to be run on page load, but if you wanted you could put all of this in a function and addEventListener and call it whenever the container is resized.
var $container = document.querySelector(''.ellipses-container'');
//optional - show the full text on hover with a simple title attribute
$container.title = $container.textContent.trim();
$container.textContent.trim().split('' '').some(function (word) {
//create a span for each word and append it to the container
var newWordSpan = document.createElement(''span'');
newWordSpan.textContent = word;
$container.appendChild(newWordSpan);
if (newWordSpan.getBoundingClientRect().bottom > $container.getBoundingClientRect().bottom) {
//it gets into this block for the first element that has part of itself below the bottom of the container
//get the last visible element
var containerChildNodes = $container.childNodes;
var lastVisibleElement = containerChildNodes[containerChildNodes.length - 2];
//replace this final span with the ellipsis character
newWordSpan.textContent = ''/u2026'';
//if the last visible word ended very near the end of the line the ellipsis will have wrapped to the next line, so we need to remove letters from the last visible word
while (lastVisibleElement.textContent != "" && newWordSpan.getBoundingClientRect().bottom > $container.getBoundingClientRect().bottom) {
lastVisibleElement.style.marginRight = 0;
lastVisibleElement.textContent = lastVisibleElement.textContent.slice(0, -1);
}
//using .some() so that we can short circuit at this point and no more spans will be added
return true;
}
});
.multi-line-container {
border: 1px solid lightgrey;
padding: 4px;
height: 150px;
width: 300px;
}
.ellipses-container {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start; /* optionally use align-content:stretch, the default, if you don''t like the extra space at the bottom of the box if there''s a half-line gap */
overflow: hidden;
position: relative;
}
.ellipses-container > span {
flex: 0 0 auto;
margin-right: .25em;
}
.text-body {
display: none;
}
<div class="multi-line-container ellipses-container">
<div class="text-body ellipses-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus ut massa eget porttitor. Nulla a eros sit amet ex scelerisque iaculis nec vitae turpis. Sed pharetra tincidunt ante, in mollis turpis consectetur at. Praesent venenatis pulvinar lectus, at tincidunt nunc finibus non. Duis tortor lectus, elementum faucibus bibendum vitae, egestas bibendum ex. Maecenas vitae augue vitae dui condimentum imperdiet sit amet mattis quam. Duis eleifend scelerisque magna sed imperdiet. Mauris tempus rutrum metus, a ullamcorper erat fringilla a. Suspendisse potenti. Praesent et mi enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
Prueba de esta manera simple. También jsfiddle enlace jsfiddle aquí.
Aquí está
-webkit-line-clamp
tiene un papel importante.
El valor de esta propiedad decide cuántas líneas son visibles.
PARTE CSS
// whatever string
const myString = ''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.'';
// you can set max string length
const maxStrLength = 100;
const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString;
console.log(truncatedString);
PARTE HTML
h3{
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px 30px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Puede ser que esto pueda ayudarlos, muchachos. Elipses de líneas múltiples con información sobre herramientas. https://codepen.io/Anugraha123/pen/WOBdOb
<div>
<p class="cards-values">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
</p>
<span class="tooltip"></span>
</div>
Se me ocurrió mi propia solución para esto:
/*this JS code puts the ellipsis (...) at the end of multiline ellipsis elements
*
* to use the multiline ellipsis on an element give it the following CSS properties
* line-height:xxx
* height:xxx (must line-height * number of wanted lines)
* overflow:hidden
*
* and have the class js_ellipsis
* */
//do all ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});
//redo ellipsis when window resizes
var re_ellipsis_timeout;
jQuery( window ).resize(function() {
//timeout mechanism prevents from chain calling the function on resize
clearTimeout(re_ellipsis_timeout);
re_ellipsis_timeout = setTimeout(function(){ console.log("re_ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});
//the main function
function put_ellipsisses(){
jQuery(".js_ellipsis").each(function(){
//remember initial text to be able to regrow when space increases
var object_data=jQuery(this).data();
if(typeof object_data.oldtext != "undefined"){
jQuery(this).text(object_data.oldtext);
}else{
object_data.oldtext = jQuery(this).text();
jQuery(this).data(object_data);
}
//truncate and ellipsis
var clientHeight = this.clientHeight;
var maxturns=100; var countturns=0;
while (this.scrollHeight > clientHeight && countturns < maxturns) {
countturns++;
jQuery(this).text(function (index, text) {
return text.replace(//W*/s(/S)*$/, ''...'');
});
}
});
}
Si desea aplicar puntos suspensivos (...) a una
sola línea de texto
, CSS lo hace algo fácil con la propiedad de
text-overflow
.
Todavía es un poco complicado (debido a todos los requisitos, ver más abajo), pero
text-overflow
hace posible y confiable.
Sin embargo, si desea utilizar puntos suspensivos en texto de varias líneas , como sería el caso aquí, no espere divertirse. CSS no tiene un método estándar para hacer esto, y las soluciones son impredecibles.
Puntos suspensivos para texto de una sola línea
Con
text-overflow
, los puntos suspensivos se pueden aplicar a una sola línea de texto.
Se deben cumplir los siguientes requisitos de CSS:
-
debe tener un
width,widthmax-widthoflex-basis -
debe tener
white-space: nowrap -
debe tener un
overflowcon un valor que no seavisible -
debe
display: blockodisplay: blockinline-block(o el equivalente funcional, como un elemento flexible).
Entonces esto funcionará:
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}
<p>
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>
PERO, intente eliminar el
width
, o dejar que el
overflow
predeterminado sea
visible
, o eliminar
white-space: nowrap
, o usar algo que no sea un elemento contenedor de bloque, Y, los puntos suspensivos fallan miserablemente.
Una gran conclusión aquí:
text-overflow: ellipsis
no tiene ningún efecto en el texto de varias líneas
.
(El
white-space: nowrap
requisito de
white-space: nowrap
sola elimina esa posibilidad).
p {
width: 200px;
/* white-space: nowrap; */
height: 90px; /* new */
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}
<p>
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>
Puntos suspensivos para texto multilínea
Debido a que CSS no tiene propiedad para puntos suspensivos en texto de varias líneas, se han creado varias soluciones alternativas. Varios de estos métodos se pueden encontrar aquí:
- jQuery dotdotdot ...
- Line Clampin ''(Truncar texto de varias líneas)
- Puntos suspensivos de CSS: cómo administrar puntos suspensivos de varias líneas en CSS puro
- Una solución CSS pura para el truncamiento de texto multilínea
El enlace Mobify anterior se eliminó y ahora hace referencia a una copia archive.org, pero parece estar implementado en este código .
Si está utilizando JavaScript, tal vez pueda hacer algo como a continuación. Sin embargo, esto no tiene en cuenta la altura del contenedor ...
.crd-para {
color: $txt-clr-main;
line-height: 2rem;
font-weight: 600;
margin-bottom: 1rem !important;
overflow: hidden;
span::after {
content: "...";
padding-left: 0.125rem;
}
}
Si también tiene varios elementos y desea un enlace con el botón Leer más después de los puntos suspensivos, eche un vistazo a https://.com/a/51418807/10104342
Si quieres algo como esto:
Todos los meses no se cobran los primeros 10 TB. El resto del tráfico ... Leer más
Simplemente aumente -webkit-line-clamp: 4; para aumentar el número de líneas
function lineclamp() {
var lineheight = parseFloat($(''p'').css(''line-height''));
var articleheight = $(''article'').height();
var calc = parseInt(articleheight/lineheight);
$("p").css({"-webkit-line-clamp": "" + calc + ""});
}
$(document).ready(function() {
lineclamp();
});
$( window ).resize(function() {
lineclamp();
});
article {
height:60%;
background:red;
position:absolute;
}
p {
margin:0;
line-height:120%;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Editar 02/05/2018
Line clamp es un CSS (webkit) patentado e indocumentado: https://caniuse.com/#feat=css-line-clamp , por lo que actualmente solo funciona en unos pocos navegadores.
Verifique este código a continuación para obtener un truco CSS puro con una alineación adecuada que sea compatible con todos los navegadores
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 103px;
text-align: justify;
padding: 15px;
}
.block-with-text:after {
content: ''...'';
position: absolute;
right: 15px;
bottom: -4px;
background: linear-gradient(to right, #fffff2, #fff, #fff, #fff);
}
.
<p class="block-with-text">The Hitch Hiker''s Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can''t see it, it can''t see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
usa esta fórmula:
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>
<!DOCTYPE html>
<html>
<head>
<style>
/* styles for ''...'' */
.block-with-text {
width: 50px;
height: 50px;
/* hide text if it more than N lines */
overflow: hidden;
/* for set ''...'' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn''t adjoin right side */
text-align: justify;
/* place for ''...'' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: ''...'';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '''';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
</style>
</head>
<body>
a
<div class="block-with-text">g fdsfkjsndasdasd asd asd asdf asdf asdf asdfas dfa sdf asdflk jgnsdlfkgj nsldkfgjnsldkfjgn sldkfjgnls dkfjgns ldkfjgn sldkfjngl sdkfjngls dkfjnglsdfkjng lsdkfjgn sdfgsd</div>
<p>This is a paragraph.</p>
</body>
</html>
p{
line-height: 20px;
width: 157px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
o podemos restringir las líneas usando y alto y desbordamiento.
You can achieve this by a few lines of CSS and JS.
CSS:
div.clip-context {
max-height: 95px;
word-break: break-all;
white-space: normal;
word-wrap: break-word; //Breaking unicode line for MS-Edge works with this property;
}
JS:
$(document).ready(function(){
for(let c of $("div.clip-context")){
//If each of element content exceeds 95px its css height, extract some first
//lines by specifying first length of its text content.
if($(c).innerHeight() >= 95){
//Define text length for extracting, here 170.
$(c).text($(c).text().substr(0, 170));
$(c).append(" ...");
}
}
});
HTML:
<div class="clip-context">
(Here some text)
</div>