html - not - Elipsis de desbordamiento de texto en dos líneas
text-overflow ellipsis paragraph (11)
Aquí hay un script simple para administrar los puntos suspensivos usando jQuery. Inspecciona la altura real del elemento y crea un nodo original oculto y un nodo truncado. Cuando el usuario hace clic, cambia entre las dos versiones.
Uno de los grandes beneficios es que la "elipsis" está cerca de la última palabra, como se esperaba.
Si utiliza soluciones CSS puras, los tres puntos aparecen distantes de la última palabra.
function manageShortMessages() {
$(''.myLongVerticalText'').each(function () {
if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
$(this).addClass(''ellipsis short'');
});
$(''.myLongVerticalText.ellipsis'').each(function () {
var original = $(this).clone().addClass(''original notruncation'').removeClass(''short'').hide();
$(this).after(original);
//debugger;
var shortText = '''';
shortText = $(this).html().trim().substring(0, 60) + ''...'';
$(this).html(shortText);
});
$(''.myLongVerticalText.ellipsis'').click(function () {
$(this).hide();
if ($(this).hasClass(''original''))
{
$(this).parent().find(''.short'').show();
}
else
{
$(this).parent().find(''.original'').show();
}
});
}
manageShortMessages();
div {
border:1px solid red;
margin:10px;
}
div.myLongVerticalText {
height:30px;
width:450px;
}
div.myLongVerticalText.ellipsis {
cursor:pointer;
}
div.myLongVerticalText.original {
display:inline-block;
height:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.
Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>
<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.
</div>
</body>
Sé que puede usar una combinación de reglas CSS para hacer que el texto termine con puntos suspensivos (...) cuando sea el momento de desbordar (salir de los límites de los padres).
¿Es posible (siéntete libre de decir simplemente que no) para lograr el mismo efecto, pero deja que el texto se ajuste en más de una línea?
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Como puede ver, el texto termina con puntos suspensivos cuando se vuelve más ancho que el ancho del div. Sin embargo, todavía hay espacio suficiente para que el texto se ajuste en una segunda línea y continúe. Esto se interrumpe con white-space: nowrap en white-space: nowrap , que es necesario para que funcionen los puntos suspensivos.
¿Algunas ideas?
PS: No hay soluciones JS, CSS puro si es posible.
Basándome en una respuesta que vi en stackoveflow, creé este MENOR mixin ( use este enlace para generar el código CSS ):
.max-lines(@lines: 3; @line-height: 1.2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
line-height: @line-height;
max-height: @line-height * @lines;
}
Uso
.example-1 {
.max-lines();
}
.example-2 {
.max-lines(3);
}
.example-3 {
.max-lines(3, 1.5);
}
Css a continuación debe hacer el truco.
Después de la segunda línea, el texto contendrá ...
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
Echa un vistazo a esta versión de css pura: http://codepen.io/martinwolf/pen/qlFdp
display: block;
display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
Este es un hack total, pero funciona:
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: ''...'';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
Tiene problemas ... podría cortar una carta de manera incómoda, y probablemente tendrá algunos resultados extraños en un sitio receptivo.
Las propiedades fáciles de CSS pueden hacer el truco. Lo siguiente es para una elipsis de tres líneas.
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
Mi solución reutiliza la de amcdnl, pero mi reserva consiste en usar una altura para el contenedor de texto:
.my-caption h4 {
display: -webkit-box;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;/* Fallback for non-webkit */
}
No estoy seguro de cuál es tu objetivo, pero ¿quieres que el texto venga en la segunda línea?
Aquí está su jsFiddle: http://jsfiddle.net/8kvWX/4/ acaba de eliminar lo siguiente:
white-space:nowrap;
No estoy seguro de si esto es lo que buscas o no.
Saludos,
Mee
No estoy seguro de haber visto THIS , pero hace poco tiempo, el excelente CSS-Tricks.com de Chris Coyier publicó un enlace a esto y es una solución de CSS pura que logra exactamente lo que buscas.
(Haga clic para ver en CodePen)
HTML:
<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having
little or no money in my purse, and nothing particular to interest me on
shore, I thought I would sail about a little and see the watery part of the
world. It is a way I have of driving off the spleen, and regulating the
circulation. Whenever I find myself growing grim about the mouth; whenever it
is a damp, drizzly November in my soul; whenever I find myself involuntarily
pausing before coffin warehouses, and bringing up the rear of every funeral I
meet; and especially whenever my hypos get such an upper hand of me, that it
requires a strong moral principle to prevent me from deliberately stepping
into the street, and methodically knocking people''s hats off – then, I account
it high time to get to sea as soon as I can.
</p>
</div>
</div>
CSS:
html,body,p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "/02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
�background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear,left top,right top,
from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}
Por supuesto, ser una solución CSS pura significa que también es bastante complicada, pero funciona de forma limpia y elegante. Asumiré que Javascript está fuera de discusión porque esto es mucho más fácil de lograr (y posiblemente más degradable) con Javascript.
Como beneficio adicional, hay un archivo zip descargable del proceso completo (si desea entenderlo todo), pero también un archivo de mezcla SASS para que pueda incorporarlo fácilmente a su proceso.
¡Espero que esto ayude!
Parece más elegante combinando dos clases. Puede eliminar la clase de two-lines si solo necesita ver una fila:
.ellipse {
white-space: nowrap;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.two-lines {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
.width{
width:100px;
border:1px solid hotpink;
}
<span class=''width ellipse''>
some texts some texts some texts some texts some texts some texts some texts
</span>
<span class=''width ellipse two-lines''>
some texts some texts some texts some texts some texts some texts some texts
</span>
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 36px;
max-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
He encontrado un combo de trabajos de alineación de línea y de altura de línea: D