修剪引导表单元格中的文本

Question

如何修剪引导表单元格中的文本？

示例：在下面的引导表中，我在“股票名称”列中有大名，例如，这会弄乱我整个表的格式（检查投资金额、收益等列）。

我可以给股票名称列中的内容提供固定长度吗？默认情况下它可以显示“Ajanta Ph...”，一个单元格的 OnHover 可以显示全名。

我从 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|truncatechars:9 }}</td>因此，这会将字符数限制为九个（在这种情况下）。如果名称短于或正好有九个字符，那么它将呈现名称。否则，它将呈现第一个字符，然后是省略号 (...)。您可以使用*Bootstrap 的工具提示并添加如下工具提示：<td>&nbsp; &nbsp; <span data-toggle="tooltip" title="{{ row.name }}">&nbsp; &nbsp; {{ row.name|truncatechars:9 }}&nbsp; &nbsp; </span></td>