Ограничение ширины данных столбца фиксированным размером в Bootstrap 3

Question

Я использую адаптивные таблицы Bootstrap 3 для отображения данных. Тем не менее, один из столбцов имеет огромные данные по сравнению с остальными столбцами, как показано ниже

Но я хотел бы показать ограниченную длину описания. Короче, I would like to display first 2 to 3 lines of data [or 300 characters] and followed by .....

Если возможно, при наведении курсора на столбец описания должно отображаться полное описание как tooltip

Как мне этого добиться?

Answer 1

Установите максимальную высоту в строке таблицы, а затем используйте свойство многоточия CSS для отображения данных обрезки (JS/Jquery не требуется).

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

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

CSS:

примените класс mytable к тегу и используйте этот CSS:

.mytable tbody tr td{
  max-width:200px; /* Customise it accordingly */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

Поместите свой текст в $string переменная, затем используйте:

$short_string = (strlen($string) > 300) ? substr($string,0,300) : $string;

Это проверит ваш текст, и если он более 300 символов, то это даст вам первые 300 символов.
Или используйте этот код для добавления "..." в конце вашей новой короткой строки.

$short_string = (strlen($string) > 300) ? substr($string,0,300).'...' : $string;