css - plantillas - tablas en bootstrap

¿La elipsis del texto de la tabla de BootStrap no puede ser con web sensible?

Question

Estoy tratando de implementar elipsis String en la etiqueta de tabla.

El código fuente está abajo.

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class=''text-center'' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href=''/view?nid=${item.id}''">${item.name}</a>
                </nobr>
              </td>
              <td class=''text-center'' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

Este código funciona y si String es demasiado largo, muestra ... lo que esperaba.

Sin embargo, cuando pruebo responsivo se vuelve feo.

Escribí la siguiente parte para expresar la fecha de registro del artículo.

Pero cuando el navegador se reduce, su parte trasera no aparece en la pantalla.

<td class=''text-center'' style="width: 20%;">
  ${item.regDate}
</td>

¿Cómo puedo usar puntos suspensivos en Bootstrap en todos los navegadores?

Así se ve así.

Lo que esperaba (cuando se encoge el navegador) >>

columna 1 / columna 2

AAAA .... / 2014-09-24

Lo que ahora parece >>

columna 1 / columna 2

AAAA .... / 2014-09

El problema es >>

Antes de agregar la función de puntos suspensivos String, funciona de forma receptiva.

Mi conjetura >>

Tal vez la table-layout: fixed; El estilo es la causa. pero no sé cómo implementar la función de puntos suspensivos String sin table-layout .

Espero que quede más claro de lo que pregunté primero: D

Tengo la causa

El problema es el ancho: 80% , width: 20% , table-layout:fixed .

Así que cuando cambio el tamaño del navegador, toma estas opciones para ello.

Pero todavía no sé cómo reemplazarlo.

Todos estos están en una división que es una pequeña parte del sitio web y quiero un sitio web sensible.

Editado después de elegir una respuesta.

¡Gracias por responder mi pregunta!

Sin embargo encontré la causa, pero no pude arreglar esto.

La respuesta elegida no fue relevante, sin embargo fue útil.

Mi problema no fue por bootstrap, pero el ancho.

A pesar de utilizar una biblioteca web sensible,

no puede ser receptivo si usa ancho con % o propiedades px .

Answer 1

El 20% es una sugerencia, el diseño de la tabla lo ignorará. Coloque un div con un ancho apropiado (o ancho máximo) dentro de la celda de la tabla, y coloque el texto dentro de ese div.

Answer 2

Gracias a esta publicación , encontré una solución que funciona a medias sin necesidad de una tabla fija, por lo que hay mucha respuesta. Lo he probado en FF 43, Opera 34 y Chrome 47):

.ellipis {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

Sin embargo, si algunos datos ya están presentes en la celda, saltará a la siguiente línea ...

Answer 3

Si está usando bootstrap, puede usar la clase text-nowrap con solo dos de estas propiedades de style="overflow: hidden;text-overflow: ellipsis;"

Ejemplo completo:

<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">

Answer 4

Tienes que aplicar todo este estilo para el elemento de puntos suspensivos.

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