Элемент многострочного текста в стиле загрузочного стола не может быть настроен на работу с адаптивным веб-сайтом?

Я пытаюсь реализовать эллипсис String в теге Table.

Исходный код приведен ниже.

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

Этот код работает, и если String слишком длинная, он показывает ... что я ожидал.

Однако, когда я проверяю отзывчивость, он становится уродливым.

Я написал следующую часть, чтобы указать дату регистрации позиции.

Но когда браузер сжимается, его задняя часть не появляется на экране.

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

Как использовать многоточие в Bootstrap во всех браузерах?

Так выглядит так

То, что я ожидал (когда убирается браузер) >>

столбец 1/столбец 2

AAAA..../2014-09-24

Что теперь выглядит как >>

столбец 1/столбец 2

AAAA..../2014-09

Проблема заключается в >>

Прежде чем добавить функцию эллипсиса String, она работает отзывчиво.

Мое предположение >>

Возможно, table-layout: fixed; стиль является причиной. но не знают, как реализовать функцию эллипсиса String без table-layout.

Я надеюсь, что это станет более ясным, чем я спросил сначала: D

У меня есть причина

Проблема заключается в ширине: 80%, width: 20%, table-layout:fixed.

Поэтому, когда я изменяю размер браузера, он принимает эти параметры.

Но я все еще не знаю, как его заменить.

Все они находятся в div, который является небольшой частью веб-сайта, и я нуждаюсь в гибкой сети.

Отредактировано после выбора ответа.

Спасибо, что ответили на мой вопрос!

Однако я нашел причину, но не мог это исправить.

Выбранный ответ не был уместным, однако это было полезно.

Моя проблема была не в бутстрапе, а в ширине.

Несмотря на то, что, используя гибкую веб-библиотеку,

не может быть отзывчивым, если вы используете ширину с свойствами % или px.

Ответы

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

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