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

Я пытаюсь реализовать эллипсис 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.

ОТВЕТЫ

Ответ 1

вы должны применить этот стиль для эллипсиса.

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

Ответ 2

Благодаря этому сообщению было найдено полузарабочее решение, не требующее фиксированного стола, так что многие реагируют. Я тестировал его на FF 43, Opera 34 и Chrome 47):

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

Однако, если некоторые данные уже присутствуют в ячейке, он перейдет к следующей строке...

Ответ 3

Если вы используете bootstrap, вы можете использовать класс text-nowrap только с двумя этими свойствами style="overflow: hidden;text-overflow: ellipsis;"

Полный пример:

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

Ответ 4

20% - это предложение, расположение таблицы игнорирует его. Поместите div с соответствующей шириной (или максимальной шириной) внутри ячейки таблицы и поместите текст внутри этого div.