html - suspensivos - texto desbordado css
¿Es posible usar el desbordamiento de texto: puntos suspensivos en el texto de líneas múltiples? (12)
Como se señaló anteriormente, hay una manera extraña de lograr esto con un paquete de web publicado por David DeSandro:
elements_to_style {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis
-webkit-line-clamp: number_of_lines_you_want;
-webkit-box-orient: vertical;
}
enlace http://dropshado.ws/post/1015351370/webkit-line-clamp
Tengo una p etiqueta con un width y height específicos. Quiero usar text-overflow:ellipsis para obtener ... si el texto en la etiqueta es demasiado largo. ¿Es posible resolver esto con css en texto de líneas múltiples?
Encontré una solución para las elipsis de CSS puro de múltiples líneas entre navegadores. Intenté muchas soluciones y solo esta funcionó solo con CSS. Tenía un div con un ancho dinámico y tenía que establecer la altura.
Aquí está el enlace: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
Escribí una función de Javascript para solucionar el problema de la elipsis de varias líneas
function ellipsizeTextBox(id) {
var el = document.getElementById(id);
var keep = el.innerHTML;
while(el.scrollHeight > el.offsetHeight) {
el.innerHTML = keep;
el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
keep = el.innerHTML;
el.innerHTML = el.innerHTML + "...";
}
}
¡espero que esto ayude!
Estoy publicando esto porque creo que mi solución es menos compleja que la popular, que implica pseudoelementos y comportamiento de flotación. Recientemente tuve que crear una solución que funcionaría en IE7, por lo que los pseudoelementos no eran una opción en primer lugar.
La técnica involucra 4 elementos:
- Un contenedor de nivel de bloque que determina la altura máxima de los contenidos
- Un contenedor en línea para el contenido de texto
- Una elipsis contenida dentro de la envoltura en línea
- Un elemento de "relleno", también dentro del contenedor en línea, que ocluye la elipsis cuando el contenido del texto no supera las dimensiones del contenedor
Al igual que con las soluciones anteriores exclusivas de CSS, la técnica exige un fondo de color sólido o una imagen de fondo de posición fija para los contenidos: la elipsis debe oscurecer partes del texto, y el relleno debe oscurecer la elipsis. Puede hacer un efecto degradado de fantasía para hacer que el texto se desvanezca en las elipsis, pero dejaré ese detalle cosmético a discreción.
Estructura HTML
<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
<!-- The inline wrapper -->
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
<!-- The ellipsis, which can contain anything you want -
(a ''more'' link, for example) -->
<span class="ellipsis">
…
</span>
<!-- The fill, which covers the ellipsis when the text doesn''t overflow -->
<span class="fill"></span>
</span>
</p>
CSS
body {
/* We need a solid background or background-position: fixed */
background: #fff;
/* You''ll need to know the line height to clamp on line breaks */
line-height: 1.5;
}
.clamped {
overflow: hidden;
position: relative;
}
/* Clamp to 2 lines, ie line-height x 2:
Obviously any number of these classes can be written as needed
*/
.clamped-2 {
max-height: 3em;
}
/* The ellipsis is always at the bottom right of the container,
but when the text doesn''t reach the bottom right...
*/
.clamped .ellipsis {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
}
/* ...It''s obscured by the fill, which is positioned at the bottom right
of the text, and occupies any remaining space.
*/
.clamped .fill {
background: #fff;
height: 100%;
position: absolute;
width: 100%;
}
Aquí hay un violín que lo demuestra : cambie el tamaño del ancho de su navegador o cambie el texto para verlo pasar de puntos suspensivos a no-elipsis.
Aparte del factor de elegancia arbitraria, creo que esto es más eficiente que la solución popular porque no se basa en carrozas (que requieren una gran cantidad de repintado). El posicionamiento absoluto es mucho más simple de calcular ya que no hay interdependencias al calcular diseño.
Google no revela nada remotamente prometedor, así que voy a decir que no es posible.
Encontré text-overflow: -o-ellipsis-lastline , pero solo funciona en Opera : http://people.opera.com/dstorey/text/text-overflow.html (mirror: http://jsbin.com/exugux/ )
También hay una solución similar de solo WebKit: http://dropshado.ws/post/1015351370/webkit-line-clamp
HTML no ofrece tal característica, y esto es muy frustrante.
Es por eso que he desarrollado una pequeña biblioteca para tratar este problema. La biblioteca proporciona objetos para modelar y realizar el procesamiento de texto a nivel de letra. Esto debería hacer justo lo que necesita:
Lea más en http://www.samuelrossille.com/home/jstext para captura de pantalla, tutorial y enlace de descarga.
Oye, puedes hacerlo de esta manera usando css.
Para Chrome y Safari
.block-with-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Para Firefox e Internet Explorer
* styles for ''...'' */
.block-with-text {
/* 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;
}
Puedes hacerlo con css. Solo funciona en los navegadores webkit pero tiene un respaldo para los otros.
utilizar :
display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
junto con:
max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;
Aquí está el violín: demo
Se modificó la función por user1152475 para que funcione palabra por palabra (espacio delimitado) en lugar de carácter por carácter.
function ellipsizeTextBox(id) {
var el = document.getElementById(id);
var wordArray = el.innerHTML.split('' '');
while(el.scrollHeight > el.offsetHeight) {
wordArray.pop();
el.innerHTML = wordArray.join('' '') + ''...'';
}
}
Tenga en cuenta que para ambas soluciones, la caja debe tener una altura establecida.
solo en caso de que alguien llegue aquí, ¿esta es una solución para ti? navegador cruzado css puro. http://codepen.io/issactomatotan/pen/LkJbjO
<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;">
<p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>
.minHeightg{
height:5.6rem !important;
width:20%;
}
.productOverflow
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 3.6rem; /* fallback */
-webkit-line-clamp: 3; /* number of lines to show */
-webkit-box-orient: vertical;
}
/*firefox*/
@-moz-document url-prefix() {
.productOverflow
{
overflow: hidden;
text-overflow:ellipsis;
display: -moz-box !important;
line-height: 16px; /* fallback */
max-height: 3.6rem; /* fallback */
-moz-line-clamp: 3; /* number of lines to show */
-moz-box-orient: vertical;
}
<div class="minHeightg">
<p class="productOverflow">Some quick example text to build on the card title .</p>
</div>