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

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>

    <span data-toggle="tooltip" title="{{ row.name }}">

    {{ row.name|truncatechars:9 }}

    </span>

</td>