Как мы форматируем размер ячейки, чтобы быть постоянным

Question

Мы показываем список тем в верхней части таблицы, поскольку из-за разной ширины ширина столбца становится больше или меньше.Мы хотели бы сохранить это постоянным размером и, возможно, добавить точечные суффиксы в конце, чтобы сохранить его постоянным.Как мы делаем это динамически.

например, названия тем могут быть Математика, Наука, Английский, История, Биология, Наука об окружающей среде ...

Мы бы хотели, чтобы они отображались как Mathema ..., Наука, История, Биология, Окружающая среда ... (Я бы предпочел, чтобы форматирование происходило на стороне клиента, я не хочу, чтобы сторона сервера форматировала эти строки).Как мы это делаем?

Answer 1

Почему бы не сделать это полностью в CSS?

Это можно сделать с помощью CSS и избежать обработки на стороне клиента.Если вы хотите ускорить рендеринг таблицы, вы также можете установить фиксированное значение table-layout для таблицы, что не позволит ячейкам таблицы пересчитывать измерения на основе содержимого.Он отображает таблицы (особенно длинные) намного быстрее, если вы можете гарантировать, что ваш контент действительно будет соответствовать.

В любом случае.Вот немного CSS:

table
{
  table-layout: fixed;
}

td
{
  width: 50px; /* set this to whatever width you'd like */
  overflow: hidden;
  text-overflow: ellipsis; /* IE, Safari, Chrome */
  -o-text-overflow: ellipsis; /* this one's for Opera */
  white-space: nowrap;
}

Это будет правильно отображаться в IE, Chrome, Opera и Safari.Но FF не будет отображать это.Но есть и обходной путь для этого.На сайте Mozilla есть информация об этом.Он говорит, что -moz-binding может быть использован для этой цели.И это сообщение в блоге показывает вам, как это сделать.

Подход Javascript

Но если вы хотите использовать сценарий, я предлагаю вам не нарушатьслово после определенного количества символов, потому что вы получите слова различной длины в зависимости от используемой в них буквы.«WMWMWM» намного длиннее, чем «IIIIII», хотя они оба имеют длину 6 символов.

Лучшим способом было бы сделать это следующим образом:

• создать манекен абсолютно позиционированныйи скрытый (по видимости и не дисплей) div, но его стили шрифта должны быть полностью такими же, как в ячейках таблицы.
• проходит по всем ячейкам и для каждой:
  1. взять ячейку
  2. скопировать содержимое ячейки в div
  3. проверить, что div width подходит для соответствующей ширины, и если он действительно скопирует свое содержимое обратно в ячейку и вернуться к шагу 1
  4. удалите последний символ и прикрепите многоточие
  5. перейдите к шагу 3

Таким образом, вы получите самые длинные строки в ячейкахкоторые соответствуют ширине ячейки.Поэтому, если у какого-либо слова есть широкие буквы (например, m, w) или очень узкие буквы (i), оно будет корректно обрезать строку и только тогда, когда это необходимо.

Answer 2

Вы отметили jQuery, поэтому вот ответ jQuery:

$(document).ready(function() {

    $("table th").each(function() {
        var text = $(this).text();
        if (text.length > 7) {
           $(this).text(text .slice(0,7) + "...");
        }

    });

});

Вот вам рабочая скрипка , на которую вы можете посмотреть.

Answer 3

var str = 'Mathematics';

if (str.length > 7) {
   str = str.slice(0,7) + '...';
}
// str == 'Mathema...' is true...

---

var str = ['Mathematics', 'Science', 'English', 'History', 'Biology', 'Environmental Science'];

for (i=0;i<str.length;i++)
   if (str[i].length > 7) {
      str[i] = str[i].slice(0,7) + '...'
   }
// str == ['Mathema...' , 'Science', 'History', 'Biology', 'Environ...']

дайте больше деталей, и мы можем получить что-то еще ...