javascript - trim Bootstrap 表单元格中的文本

Question

如何 trim Bootstrap 表单元格中的文本？

示例:在下面的 bootstrap 表中，我在“股票名称”列中有大牌，例如，这会弄乱我整个表的格式(检查投资金额、 yield 等列)。

我可以给股票名称栏的内容定长吗？默认情况下它可以显示“Ajanta Ph...”，悬停在一个单元格上它可以显示全名。

我从 Django 模板注入(inject)这个页面。

<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 template filter [Django-doc] :

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

因此，这会将字符数限制为九个(在本例中)。如果名称短于或恰好有九个字符，那么它将呈现该名称。否则它将呈现第一个字符，然后是省略号 (...)。

您可以使用 *Bootstrap's tooltips并添加如下工具提示:

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