Обрезать текст в ячейке таблицы начальной загрузки

Question

Как я могу обрезать текст в ячейке таблицы начальной загрузки?

Пример: В приведенной ниже таблице начальной загрузки у меня большие имена в столбце 'stock name', например, это приводит к неправильному форматированию всей таблицы (проверьте столбцы)например, вложенная сумма, прибыль и т. д.).

Могу ли я указать фиксированную длину контента в колонке наименований акций?По умолчанию может отображаться «Ajanta Ph ...», при наведении на ячейку может отображаться полное имя.

Я добавляю эту страницу изШаблон Django.

<tr id="port_row_{{row.stock}}_{{index}}">
   {% if row.stock == 'TOTAL'%}
   <td> {{row.stock}}</td>
   {% else %}
   <td> <a target="_blank" style="color:blue;" href="https://www.google.com/finance?q=NSE:{{ row.stock }}">{{row.stock}}</a></td>
   {% endif %}
   <td>{{row.name}}</td>
   <td>{{row.monday_open_price|intcomma}}</td>
   <td>{{row.previous_close|intcomma}}</td>
   <td>
      {% if row.price >= row.previous_close %}
      <div style="color:green">
         {{row.price|intcomma}}
      </div>
      {% else %}
      <div style="color:red">
         {{row.price|intcomma}}
      </div>
      {% endif %}
   </td>
   <td> &#x20b9; {{row.investment_amount|intcomma}}</td>
   <td>
      {% if row.weekly_gain >= 0 %}
      <div style="color:green">
         {{row.weekly_gain|intcomma}}
         <i class="fa fa-arrow-up"></i>
      </div>
      {% else %}
      <div style="color:tomato">
         {{row.weekly_gain|intcomma}}
         <i class="fa fa-arrow-down"></i>
      </div>
      {% endif %}
   </td>
   <td>
      {% if row.daily_gain >= 0 %}
      <div style="color:green">
         {{row.daily_gain|intcomma}}
         <i class="fa fa-arrow-up"></i>
      </div>
      {% else %}
      <div style="color:tomato">
         {{row.daily_gain|intcomma}}
         <i class="fa fa-arrow-down"></i>
      </div>
      {% endif %}
   </td>
   <td> &#x20b9; {{row.current_market_value|intcomma}}</td>
</tr>

Answer 1

Вы можете использовать шаблонный шаблон |truncatechars [Django-doc] :

<td>{{ row.name<b>|truncatechars:9</b> }}</td>

Таким образом, количество символов будет ограниченодевять (в данном случае).Если имя короче или содержит ровно девять символов, оно будет отображаться.В противном случае будут отображаться первые символы с последующим многоточием (…).

Вы можете использовать * всплывающие подсказки Bootstrap и добавить всплывающую подсказку, например:

<td>
    <span <b>data-toggle="tooltip" title="{{ row.name }}"</b>>
    {{ row.name|truncatechars:9 }}
    </span>
</td>