html5 - read - tag code html w3schools

Bootstrap 3 trunca texto largo dentro de las filas de una tabla de forma receptiva

Question

Estoy usando tablas de bootsrap 3, cuando pongo texto grande en la tabla, se envuelve en varias líneas, pero quiero que se trunque con tres puntos al final de una manera receptiva sin estropear el diseño de la tabla (i encontrado algunas soluciones, pero con efectos desagradables).

Es eso posible ? cómo ?

PD: cualquier solución es bienvenida, pero me gustaría que fuera solo HTML / CSS si es posible.

Answer 1

Debe usar table-layout:fixed para que las elipsis de CSS funcionen 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

Answer 2

Esto es lo que logré, pero tuve que establecer el ancho, y no puede ser porcentual.

.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
}

<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 esto: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

Answer 3

Estoy usando bootstrap.
Usé parámetros css.

.table {
  table-layout:fixed;
}

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

y los parámetros del sistema de grilla bootstrap, como este.

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

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

Answer 4

Lo hice de esta manera (necesitas agregar un texto de clase a <td> y poner el texto entre un <span> :

HTML

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

HABLAR CON DESCARO A

.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%;
}

Y seguirá teniendo capacidad de respuesta móvil (olvídelo con diseño = fijo) y mantendrá el comportamiento original.

PD : por supuesto, 177px es un tamaño personalizado (pon lo que necesites).