Ответ 1

Я столкнулся с той же проблемой, что и вы, но приведенные выше ответы не помогли решить мою проблему. Единственный способ, которым я смог его решить, - сделать класс и использовать определенную ширину, чтобы вызвать упаковку для моего конкретного варианта использования. В качестве примера я привел фрагмент ниже - но я обнаружил, что вам нужно будет отрегулировать его для рассматриваемой таблицы - поскольку я обычно использую несколько colspans в зависимости от макета. Я полагаю, что Bootstrap не работает - это потому, что он удаляет ограничения обертывания, чтобы получить полную таблицу для полос прокрутки. Столбец должен отключать его.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
}

Я надеюсь, что это поможет

Ответ 2

просто используйте, как показано ниже, и он будет переносить любой длинный текст внутри таблицы. Нет необходимости ничего другого

<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td>

Ответ 3

Итак, вы можете использовать следующее:

td {
  white-space: normal !important; // To consider whitespace.
}

Если это не работает:

td {
  white-space: normal !important; 
  word-wrap: break-word;  
}
table {
  table-layout: fixed;
}

Ответ 4

Поведение целиком:

Создайте гибкие таблицы, обернув любой .table в .table-отзывном , чтобы они прокручивались по горизонтали на небольших устройствах (до 768px). При просмотре на большом, чем 768 пикселей, вы не увидите различий в этих таблицах.

Что означает, что таблицы реагируют по умолчанию (корректируют их размер). Но только если вы не хотите сломать свои строки таблицы и добавить полосу прокрутки, если класс использования .table-responsive не достаточен для использования в номере.

Если вы посмотрите источник начальной загрузки, вы увидите, что есть медиа-запрос, который активируется только на экране XS size, и он устанавливает текст таблицы в white-space: nowrap, из-за чего он не прерывается.

TL; DR; Решение

Просто удалите .table-responsive элемент/класс из вашего html-кода.

Ответ 5

ИЗМЕНИТЬ

Я думаю, что причина, по которой ваша таблица не реагирует на начало, заключалась в том, что вы не переносили классы .container, .row и .col-md-x, подобные этому

<div class="container">
   <div class="row">
     <div class="col-md-12">
     <!-- or use any other number .col-md- -->
         <div class="table-responsive">
             <div class="table">
             </div>
         </div>
     </div>
   </div>
</div>

При этом вы все равно можете использовать теги <p> и даже сделать его отзывчивым.

См. пример Bootply здесь

Ответ 6

Хорошо. Вы можете использовать свойство CSS word wrap. Что-то вроде этого:

td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
word-wrap:break-word;
}

Ответ 7

Ответ UberNeo - это нормально, и мне это нравится, потому что вам не нужно ничего изменять, кроме TD. Единственное, что вам нужно добавить в стиль "белое пространство: нормальное", чтобы поддерживать отзывчивые характеристики таблицы, если нет, то при определенных разрешениях обертка не выполняется, а свиток таблицы не появляются.

style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;"

Ответ 8

.table td.abbreviation {
  max-width: 30px;
}
.table td.abbreviation p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

<table class="table">
<tr>
	<td class="abbreviation"><p>ABC DEF</p></td>
</tr>
</table>

Ответ 9

Добавьте ваш новый класс "tableresp" с классом table-responseisve, а затем добавьте приведенный ниже код в ваш файл js

$(".tableresp").on('click', '.dropdown-toggle', function(event) {

    if ($('.dropdown-menu').length) {
        var elm = $('.dropdown-menu'),
            docHeight = $(document).height(),
            docWidth = $(document).width(),
            btn_offset = $(this).offset(),
            btn_width = $(this).outerWidth(),
            btn_height = $(this).outerHeight(),
            elm_width = elm.outerWidth(),
            elm_height = elm.outerHeight(),
            table_offset = $(".tableresp").offset(),
            table_width = $(".tableresp").width(),
            table_height = $(".tableresp").height(),

            tableoffright = table_width + table_offset.left,
            tableoffbottom = table_height + table_offset.top,
            rem_tablewidth = docWidth - tableoffright,
            rem_tableheight = docHeight - tableoffbottom,
            elm_offsetleft = btn_offset.left,
            elm_offsetright = btn_offset.left + btn_width,
            elm_offsettop = btn_offset.top + btn_height,
            btn_offsetbottom = elm_offsettop,

            left_edge = (elm_offsetleft - table_offset.left) < elm_width,
            top_edge = btn_offset.top < elm_height,
            right_edge = (table_width - elm_offsetleft) < elm_width,
            bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height;

        console.log(tableoffbottom);
        console.log(btn_offsetbottom);
        console.log(bottom_edge);
        console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height);


        var table_offset_bottom = docHeight - (table_offset.top + table_height);

        var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top;

        var bottomedge = touchTableBottom > table_offset_bottom;

        if (left_edge) {
            $(this).addClass('left-edge');
        } else {
            $('.dropdown-menu').removeClass('left-edge');
        }
        if (bottom_edge) {
            $(this).parent().addClass('dropup');
        } else {
            $(this).parent().removeClass('dropup');
        }

    }
});
var table_smallheight = $('.tableresp'),
    positioning = table_smallheight.parent();

if (table_smallheight.height() < 320) {
    positioning.addClass('positioning');
    $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static');

} else {
    positioning.removeClass('positioning');
    $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative');

}