libreria dotdotdot para ellipsis

OssoH · 13 Agosto 2013, 13:36 PM

¿alguien ha utlizado la libreria dotdodot? http://dotdotdot.frebsite.nl/

Lo que quisiera es conseguir que el texto dentro de la caja quede centrado verticalmente y usando vertical-align:middle; no hay forma. Ignora ese CSS.

Si usara display: table-cell; vertical-align: middle; entonces si lo alinea verticamente pero pierdo la opción que si no entra el texto dentro de la caja no me ponga los puntos suspensivos (...)

En cambio la alineación horizontal si funciona text-align:center;

¿Algún experto que sepa como conseguir?
Gracias!!!

OssoH · 13 Agosto 2013, 17:49 PM

He intentado usar como alternativa la libreria jquery jquery.ellipsis.js sin éxito!!.

basickdagger · 13 Agosto 2013, 17:56 PM

Cita de: OssoH en 13 Agosto 2013, 17:49 PM
He intentado usar como alternativa la libreria jquery jquery.ellipsis.js sin éxito!!.

mm bueno nunca eh usado esa librería pero lo que se me ocurre es q utilices padding-top, para generar un margen arriba... yo cuando tengo mucho texto suelo colocarle al div contenedor un min-height y overflow para q este crezca, pero es lo que se me ocurre saludos.. y voy a ver si pruebo la librería que se ve bien.. saludos...

OssoH · 13 Agosto 2013, 18:08 PM

Eso ya lo he hecho sin exito tampoco.
Yo tengo una caja (div) de texto con ancho y alto fijo.
El texto dentro de la caja debe ir centrado tanto verticalmente como horizontalmente. En el caso que el texto exceda la caja entonces es donde se aplica ellipsis cortando el texto por donde corresponda y agregandole al final tres puntos suspensivos.
Mi problema es que no hay forma de centrarlo verticalmente.

basickdagger · 13 Agosto 2013, 18:14 PM

Cita de: OssoH en 13 Agosto 2013, 18:08 PM
Eso ya lo he hecho sin exito tampoco.
Yo tengo una caja (div) de texto con ancho y alto fijo.
El texto dentro de la caja debe ir centrado tanto verticalmente como horizontalmente. En el caso que el texto exceda la caja entonces es donde se aplica ellipsis cortando el texto por donde corresponda y agregandole al final tres puntos suspensivos.
Mi problema es que no hay forma de centrarlo verticalmente.

ya probaste metiendo el texto a una tabla y esta tabla aplicarle el vertical-align: middle; tengo entendido q a un texto no se le puede meter margin-top o bottom, por lo que es otra cosa q te puede funcionar...

OssoH · 13 Agosto 2013, 18:23 PM

La idea para agilizar el proceso de carga es hacer uso de div en vez de tablas.
Si no tengo más remedio es lo que haré pero me gustaría dejarlo como última alternativa.
Gracias

OssoH · 13 Agosto 2013, 18:59 PM

He encontrado la solución. Igual hay otra forma más fácil de hacerlo o no es del todo correcto. Si alguien se le ocurre mejorarlo que lo exponga. Gracias.

Código [Seleccionar]


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>dotdotdot, advanced cross-browser ellipsis for multiple line content.</title>

   <script type="text/javascript" language="javascript" src="jquery-1.8.3.min.js"></script>
  <script type="text/javascript" language="javascript" src="jquery.dotdotdot.min.js"></script>
  <script type="text/javascript" language="javascript">
   $(function() {
    $('#dot1_x').dotdotdot();
   });
  </script>
 </head>
 <body>

<style type="text/css" media="all">
.box1 {
 background-color:#EEFFEE; 
    border:1px solid #CCCCCC;
    height: 160px;
    padding: 10px 20px 10px;  /* arriba, izquierda-derecha, abajo */
    width:300px;
    word-wrap: break-word; 
}
.box1_interior {
 height:160px; 
 display:table-cell; 
 vertical-align:middle;
 background-color:red;
}

</style>

<div id="dot1_x" class="box1">
      <div class="box1_interior">                    
Lorem Ipsum is sintially unchanged  is sintiallpsum is sintially unch Ipsum is sintialunchangedLor
      </div>
</div>

 </body>
</html>

#!drvy · 14 Agosto 2013, 08:43 AM

Si fueras a mostrar una sola linea del texto entero, con definir line-height con el mismo valor que height te bastaba.

Código (html4strict,8,9) [Seleccionar]

<style type="text/css" media="all">
.box1 {
  background-color:#EEFFEE;
  border:1px solid #CCCCCC;
  text-align:center;
  padding: 10px 20px 10px;  /* arriba, izquierda-derecha, abajo */
  width:300px;
  height:160px;
  line-height:160px;
}
</style>

<div id="dot1_x" class="box1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Odit, placeat officiis nemo illum possimus quisquam incidunt vitae sint dolore libero.
  Hic, illo unde perspiciatis eum delectus obcaecati rem eius numquam!
</div>

Y te lo centraría tanto vertical como horizontalmente pero si se tratan de mas lineas, tu solución esta bastante bien.

Saludos

OssoH · 14 Agosto 2013, 09:12 AM

En mi caso son varias líneas.
Gracias por la observación.