Estoy usando bootstrap 3 tablas, cuando me pongo de texto de gran tamaño en la tabla que se presenta envuelto en varias líneas, pero quiero ser trunca con tres puntos en el final, de una forma respuesta sin estropear el diseño de la tabla (he encontrado algunas soluciones, pero con efectos desagradables).

Es eso posible ? cómo ?

PS: cualquier solución es bienvenida, pero me gustaría ser HTML/CSS si es posible.

InformationsquelleAutor Xsmael | 2014-05-02

4 Comentarios

  1. 26

    Me hizo de esta manera (es necesario agregar una clase texto a <td> y poner el texto entre un <span>:

    HTML

    <td class="text"><span>looooooong teeeeeeeeext</span></td>

    SASS

    .table td.text {
        max-width: 177px;
        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }
    }

    CSS equivalente

    .table td.text {
        max-width: 177px;
    }
    .table td.text span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }

    Ser el móvil sensible (olvidarse de él con layout=fijo) y se mantenga el comportamiento original.

    PS: por supuesto 177px es un tamaño personalizado (poner todo lo que usted necesita).

    • Me tuve que cambiar a display: block para quitar un poco de espacio en blanco que este se añade al final de la fila de la tabla. Consulte stackoverflow.com/questions/45588761/…
    • Es esta solución posible sin la definición de un ancho máximo, pero con tomar el resto del espacio disponible?
    • Si te refieres con cols en «auto» (ancho), me temo que no, de lo contrario el navegador no sabe cuando el texto debe ser truncado. Yo no soy un experto en CSS (soy principalmente un dev) pero creo que no me equivoco con esto. Por otro lado, si usted fija la wdth de X – 1 cols (3 de 4), es posible, supongo, pero creo contenedor (tabla tal vez) deben tener un ancho específico en algún lugar. Yo no puedo ayudarte con eso, lo siento.
    • Pensando lógicamente, el navegador sabe cuánto espacio se necesita para que la columna a caber todo en el interior de la columna. Teniendo en cuenta el ancho de la pantalla, él sabe la cantidad de espacio que tiene a la izquierda de la columna B y trunca el texto en consecuencia, si el texto en la columna B, excede la anchura. Gracias de todos modos. Esperemos que una exportación de CSS a lo largo de lúpulo y puede responder a esto.
    • si el éxito con esto, por favor, háganos saber cómo lo hizo. El navegador sabe acerca de las anchuras de todos los puertos y organizar el espacio en función del contenido. El navegador no sabe lo que es el límite para mostrar «…» a menos que establezca el ancho del contenedor primario. Así que, si selecciona 3 de 4 col anchos, entonces supongo que serán capaces de eliminar el contenido si un contenedor primario fue creado con un ancho fijo. Es decir: (100 anchura de la tabla, col1=25, col2=25, col3=25, col4=no especificado, de modo 100-25*3=25, y el navegador sabe la última col ancho).
    • Para nosotros es fácil ver un espacio en una columna y decir «se debe quitar de aquí, es obvio», pero que el navegador está haciendo matemáticas con los contenedores de anchura, la longitud del contenido y el espacio de la pantalla, así que si nadie dice: «este es el ancho, así que pare y tira de ahí», se podría suponer que usted desea, digamos, un desplazamiento horizontal de la tabla (es solo un ejemplo, es más complicado que eso). Este es mi modesto entender en esto.

  2. 60

    Necesita utilizar table-layout:fixed en orden para CSS puntos suspensivos para trabajar en las celdas de la tabla.

    .table {
      table-layout:fixed;
    }
    
    .table td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    demo: http://bootply.com/9njmoY2CmS

    • yo ya intente esto; el problema es que el diseño de la tabla no va a ser bonito, todo de la columna tienen el mismo ancho, lo cual me pareció injusto, que yo mencionaba en mi post!!!
    • bootstrap utiliza para asignar el ancho de cada columna, dependiendo de su contenido de una manera muy agradable, y quiero mantener este efecto tanto como sea posible
    • En la segunda Xsmael el punto aquí. Diseño fijo no es una solución para esto.
  3. 2

    Esto es lo que he logrado, pero tuvo que ajustar el ancho, y no se puede porcentual.

    CSS:

    .trunc{
      width:250px; 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis;
    }
    table tr td {
    padding: 5px
    }
    table tr td {
    background: salmon
    }
    table tr td:first-child {
    background: lightsalmon
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <table>
          
          <tr>
            <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td>
          <td>
             <div class="trunc">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.
             </div>
        </td>
            </tr>
          </table>

    o este: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

  4. 2

    Estoy usando bootstrap.

    He utilizado css parámetros.

    .table {
      table-layout:fixed;
    }
    
    .table td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    y bootstrap de la cuadrícula de los parámetros del sistema, como este.

    <th class="col-sm-2">Name</th>
    
    <td class="col-sm-2">hoge</td>

Dejar respuesta

Please enter your comment!
Please enter your name here